/* FQA国际货运代理管理系统 - 核心样式
* 2026企业级后台设计规范：深色优先、高信息密度、微边框、表格核心
*/
/* ===== CSS变量 ===== */
:root {
/* 品牌主色 */
--primary-1: #e6f4ff;
--primary-2: #bae0ff;
--primary-3: #91caff;
--primary-4: #69b1ff;
--primary-5: #4096ff;
--primary-6: #1677ff;
--primary-7: #0958d9;
--primary-8: #003eb3;
--primary: #1677ff;
/* 语义色 */
--success: #52c41a;
--warning: #faad14;
--danger: #ff4d4f;
--info: #1677ff;
--processing: #1677ff;
--default: #8c8c8c;
/* 中性色（亮色） */
--white: #ffffff;
--bg-1: #ffffff;
--bg-2: #fafafa;
--bg-3: #f6f7f9;
--bg-4: #f0f0f0;
--border-1: #e5e7eb;
--border-2: #d9d9d9;
--border-3: #bfbfbf;
--text-1: #1f1f1f;
--text-2: #595959;
--text-3: #8c8c8c;
--text-4: #bfbfbf;
/* 布局 */
--sidebar-width: 200px;
--sidebar-collapsed-width: 64px;
--header-height: 40px;
--tabs-height: 30px;
--content-padding: 15px;
/* 圆角 */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
/* 字体 */
--font-family: Inter, apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, 'Liberation Mono', monospace;
/* 阴影 */
--shadow-1: 0 1px 2px rgba(0,0,0,0.04);
--shadow-2: 0 2px 8px rgba(0,0,0,0.06);
--shadow-3: 0 4px 12px rgba(0,0,0,0.08);
/* 过渡 */
--transition: 200ms ease-out;
/* 图表配色（系统统一图表组件 FQA.renderChartPanel 使用，按序取用） */
--chart-1: #1677ff;
--chart-2: #52c41a;
--chart-3: #faad14;
--chart-4: #ff4d4f;
--chart-5: #722ed1;
--chart-6: #13c2c2;
--chart-7: #eb2f96;
--chart-8: #fa8c16;
--chart-grid: #eef0f3;
--chart-axis: #bfbfbf;
--chart-label: #8c8c8c;
}
/* 移动端基础: 消除300ms点击延迟 + 最小触摸区域 */
button, a.btn, .radio-item, .section-add-btn, .pickup-del-btn, .repeat-del-btn, .attach-add-btn, .attach-item-del,
[onclick], [type="submit"], .save-bar .btn {
touch-action: manipulation;
-ms-touch-action: manipulation;
}
/* 确保所有可点击元素最小触摸区域44x44(iOS HIG) */
@media screen and (pointer: coarse) {
.section-add-btn { min-height: 32px; min-width: 32px; }
.pickup-del-btn, .repeat-del-btn { min-height: 32px; min-width: 32px; }
.dynamic-table-wrap .col-actions button { min-width: 32px; min-height: 32px; }
.radio-item { min-height: 32px; padding: 6px 12px; }
.btn { min-height: 36px; }
}
/* 暗黑模式 */
html.dark {
--bg-1: #141414;
--bg-2: #1a1a1a;
--bg-3: #1f1f1f;
--bg-4: #262626;
--bg-5: #303030;
--border-1: #303030;
--border-2: #3a3a3a;
--border-3: #4a4a4a;
--text-1: #e8e8e8;
--text-2: #a6a6a6;
--text-3: #737373;
--text-4: #5a5a5a;
--primary: #4096ff;
--primary-1: #111d2c;
--primary-5: #4096ff;
--shadow-1: 0 1px 2px rgba(0,0,0,0.3);
--shadow-2: 0 2px 8px rgba(0,0,0,0.4);
--shadow-3: 0 4px 12px rgba(0,0,0,0.5);
/* 图表配色（暗底上提亮，保证对比度） */
--chart-1: #4096ff;
--chart-2: #73d13d;
--chart-3: #ffc53d;
--chart-4: #ff7875;
--chart-5: #9254de;
--chart-6: #36cfc9;
--chart-7: #f759ab;
--chart-8: #ffa940;
--chart-grid: #262626;
--chart-axis: #434343;
--chart-label: #8c8c8c;
}
/* ===== 基础重置 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
font-family: var(--font-family);
font-size: 14px;
line-height: 1.5;
color: var(--text-1);
background: var(--bg-2);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-5); }
ul, ol { list-style: none; }
input, button, textarea, select { font-family: inherit; font-size: inherit; }
/* 代码/单号类: 等宽字体 + 等宽数字 */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
/* 数字/金额类: 使用界面字体 + 等宽数字(表格中更清爽且纵向对齐) */
.num { font-family: var(--font-family); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
/* ===== 布局 ===== */
.app-layout { display: flex; height: 100vh; overflow: hidden; }
/* 侧边栏 */
.sidebar {
width: var(--sidebar-width);
background: var(--bg-1);
border-right: 1px solid var(--border-1);
display: flex;
flex-direction: column;
flex-shrink: 0;
transition: width var(--transition);
overflow: hidden;
}
.sidebar.collapsed { width: var(--sidebar-collapsed-width); }
.sidebar-logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--border-1);
flex-shrink: 0;
}
.logo-expanded {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 10px 4px;
gap: 4px;
}
.logo-collapsed {
display: none;
align-items: center;
justify-content: center;
height: var(--header-height);
}
.sidebar.collapsed .logo-expanded { display: none; }
.sidebar.collapsed .logo-collapsed { display: flex; }
.sidebar-logo .logo-icon {
width: 56px; height: 56px;
background: var(--primary);
border-radius: var(--radius-lg);
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 700; font-size: 24px;
flex-shrink: 0;
}
.sidebar-logo .logo-img {
width: 160px; height: auto; max-height: 72px;
border-radius: var(--radius-md);
object-fit: contain;
flex-shrink: 0;
}
.sidebar-logo .logo-text {
font-size: 14px; font-weight: 600; color: var(--text-1);
white-space: nowrap; overflow: hidden; text-align: center;
}
.sidebar-logo .favicon-img {
width: 28px; height: 28px;
object-fit: contain;
flex-shrink: 0;
}
/* 暗色Logo默认隐藏 */
.logo-img-dark { display: none; }
/* 折叠状态下logo-icon缩小 */
.sidebar.collapsed .sidebar-logo .logo-icon { width: 28px; height: 28px; font-size: 14px; border-radius: var(--radius-sm); }
.sidebar-menu {
flex: 1; overflow-y: auto; overflow-x: hidden;
padding: 8px 0;
}
.sidebar-menu::-webkit-scrollbar { width: 6px; }
.sidebar-menu::-webkit-scrollbar-track { background: transparent; }
.sidebar-menu::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 9999px; }
.menu-item {
display: flex; align-items: center;
padding: 0 16px; height: 40px;
color: var(--text-2); cursor: pointer;
gap: 10px; white-space: nowrap;
font-size: 14px;
transition: all 150ms ease;
border-radius: 0;
position: relative;
}
.menu-item:hover { background: var(--bg-4); color: var(--text-1); }
.menu-item.active { background: var(--primary-1); color: var(--primary); font-weight: 500; }
.menu-item .menu-icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.menu-item .menu-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .menu-label { display: none; }
.sidebar.collapsed .menu-item { justify-content: center; padding: 0; }
.menu-group-title {
display: flex; align-items: center;
padding: 0 16px; height: 40px;
color: var(--text-2); cursor: pointer;
gap: 10px; white-space: nowrap;
font-size: 14px;
transition: all 150ms ease;
border-radius: 0; font-weight: 400;
}
.menu-group-title:hover { background: var(--bg-4); color: var(--text-1); }
.menu-group-title .menu-icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.menu-group-title .menu-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .menu-group-title { justify-content: center; padding: 0; }
.sidebar.collapsed .menu-group-title .menu-label,
.sidebar.collapsed .menu-group-title .menu-arrow { display: none; }
.sidebar.collapsed .menu-group-title .menu-icon { margin: 0; }
.menu-children { overflow: hidden; }
.sidebar.collapsed .menu-children { display: none; }
.menu-children .menu-item { padding-left: 44px; height: 36px; font-size: 13px; }
/* 折叠状态下的悬浮子菜单（JS动态创建） */
.sidebar-popup { position: fixed; min-width: 160px; background: var(--bg-1); border: 1px solid var(--border-2); border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; padding: 4px 0; }
.sidebar-popup .popup-title { padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text-1); border-bottom: 1px solid var(--border-1); margin-bottom: 4px; }
.sidebar-popup .popup-item { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 13px; color: var(--text-2); cursor: pointer; white-space: nowrap; text-decoration: none; }
.sidebar-popup .popup-item:hover { background: var(--bg-4); color: var(--text-1); }
.sidebar-popup .popup-item.active { color: var(--primary); background: var(--primary-1); }
.sidebar-popup .popup-item .menu-icon { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
/* 主区域 */
.main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
/* 顶部页头 */
.app-header {
height: var(--header-height);
background: var(--bg-1);
border-bottom: 1px solid var(--border-1);
display: flex; align-items: center;
padding: 0 24px; gap: 16px;
flex-shrink: 0; z-index: 900; /* 高于 Tabs/内容区(≤100)与 sticky 元素，保证面包屑/用户下拉不被遮挡；模态框 1000 仍可覆盖 */
}
.header-toggle { cursor: pointer; display: flex; align-items: center; color: var(--text-2); }
.header-toggle:hover { color: var(--primary); }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 14px; flex: 1; }
.breadcrumb-item { color: var(--text-3); }
.breadcrumb-item a { color: var(--text-3); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--primary); }
.breadcrumb-item:last-child { color: var(--text-1); }
.breadcrumb-sep { color: var(--text-4); }
.breadcrumb-item--active { color: var(--text-1); font-weight: 500; }
/* 面包屑下拉菜单 */
.breadcrumb-dropdown {
position: relative; display: inline-flex; align-items: center;
}
.breadcrumb-dropdown-trigger {
cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.breadcrumb-dropdown-trigger:hover { color: var(--primary); }
.dropdown-arrow { font-size: 10px; opacity: 0.6; }
.breadcrumb-dropdown:hover > .breadcrumb-dropdown-menu,
.breadcrumb-dropdown.is-open > .breadcrumb-dropdown-menu { display: block; }
.breadcrumb-dropdown.has-children > .breadcrumb-dropdown-trigger { cursor: pointer; }
.breadcrumb-dropdown.has-children > .breadcrumb-dropdown-trigger svg {
width: 12px; height: 12px; margin-left: 2px; opacity: 0.55;
fill: none; stroke: currentColor; stroke-width: 2;
}
.breadcrumb-dropdown-menu {
display: none; position: absolute; top: 100%; left: 0; z-index: 1000;
min-width: 180px; max-height: 300px; overflow-y: auto;
background: var(--bg-1); border: 1px solid var(--border-1);
border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
padding: 4px 0; margin-top: 4px;
}
.breadcrumb-dropdown-menu a {
display: block; padding: 8px 16px; color: var(--text-2);
text-decoration: none; transition: all 150ms;
}
.breadcrumb-dropdown-menu a:hover {
background: var(--bg-2); color: var(--primary);
}
.header-right { display: flex; align-items: center; gap: 16px; }
.header-datetime { font-size: 13px; color: var(--text-3); font-family: var(--font-mono); }
.header-icon-btn { cursor: pointer; color: var(--text-2); display: flex; align-items: center; }
.header-icon-btn:hover { color: var(--primary); }
.header-user { display: flex; align-items: center; gap: 8px; cursor: pointer; position: relative; }
.header-user .user-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: var(--primary); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 500;
}
.header-user .user-name { font-size: 14px; color: var(--text-1); }
.user-dropdown {
position: absolute; top: 100%; right: 0; margin-top: 8px;
background: var(--bg-1); border: 1px solid var(--border-1);
border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
min-width: 180px; padding: 4px; z-index: 1000;
display: none;
}
.header-user:hover .user-dropdown,
.header-user.is-open .user-dropdown { display: block; }
.header-user .user-avatar img,
.user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.user-dropdown-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px; }
.user-avatar--lg { width: 40px; height: 40px; font-size: 16px; flex: none; }
.user-dropdown-meta { min-width: 0; }
.user-dropdown-name { font-size: 14px; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.user-dropdown-item { text-decoration: none; color: var(--text-1); }
.user-dropdown-item {
padding: 8px 12px; cursor: pointer; border-radius: var(--radius-sm);
display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-1);
}
.user-dropdown-item:hover { background: var(--bg-4); }
.user-dropdown-item.danger { color: var(--danger); }
.user-dropdown-divider { height: 1px; background: var(--border-1); margin: 4px 0; }
/* 顶部通知铃铛 */
.header-bell { position: relative; display: flex; align-items: center; }
.header-bell-trigger { position: relative; }
.header-bell-trigger svg { width: 18px; height: 18px; }
.bell-badge {
position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px;
padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff;
font-size: 11px; line-height: 16px; text-align: center; font-weight: 600;
box-sizing: border-box; pointer-events: none;
}
.bell-dropdown {
position: absolute; top: 100%; right: 0; margin-top: 8px;
width: 340px; background: var(--bg-1); border: 1px solid var(--border-1);
border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
z-index: 1000; display: none; overflow: hidden;
}
.header-bell:hover .bell-dropdown,
.header-bell.is-open .bell-dropdown { display: block; }
.bell-head {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px; border-bottom: 1px solid var(--border-1);
}
.bell-head-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-1); }
.bell-head-title svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.bell-head-title .pc-kv { font-weight: 400; font-size: 12px; color: var(--text-3); }
.bell-head-actions { display: flex; align-items: center; gap: 12px; }
.bell-head-actions a { font-size: 12px; color: var(--primary); text-decoration: none; }
.bell-head-actions a:hover { text-decoration: underline; }
.bell-list { max-height: 380px; overflow-y: auto; }
.bell-item {
display: block; padding: 10px 12px; border-bottom: 1px solid var(--border-1);
text-decoration: none; color: inherit; cursor: pointer; transition: background 120ms;
}
.bell-item:last-child { border-bottom: none; }
.bell-item:hover { background: var(--bg-4); }
.bell-item.is-unread { background: var(--primary-soft, rgba(59,130,246,.08)); }
.bell-item.is-unread:hover { background: var(--bg-4); }
.bell-item-top { display: flex; align-items: center; gap: 6px; }
.bell-item-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); flex: none; }
.bell-item-title { font-size: 13px; font-weight: 600; color: var(--text-1); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell-item-time { font-size: 11px; color: var(--text-3); flex: none; }
.bell-item-content { font-size: 12px; color: var(--text-2); margin-top: 4px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bell-item-tag { display: inline-block; margin-top: 5px; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--bg-3); color: var(--text-3); }
/* Tabs */
.app-tabs {
height: var(--tabs-height);
background: var(--bg-1);
border-bottom: 1px solid var(--border-1);
display: flex; flex-direction: row; align-items: center;
padding: 0 12px; gap: 4px;
flex-shrink: 0; overflow-x: auto; overflow-y: hidden;
}
.app-tabs::-webkit-scrollbar { height: 0; }
.tab-item {
display: flex; align-items: center; gap: 6px;
padding: 0 12px; height: 30px;
border-radius: var(--radius-sm);
font-size: 13px; color: var(--text-2);
cursor: pointer; white-space: nowrap;
transition: all 150ms ease;
}
.tab-item:hover { background: var(--bg-4); }
.tab-item.active { background: var(--primary-1); color: var(--primary); }
.tab-item .tab-close { width: 14px; height: 14px; display: none; align-items: center; justify-content: center; border-radius: 50%; }
.tab-item:hover .tab-close { display: flex; }
.tab-close:hover { background: var(--border-2); }
/* 内容区 */
.app-content {
flex: 1; overflow-y: auto;
padding: 0 var(--content-padding);
background: var(--bg-2);
}
.app-content::-webkit-scrollbar { width: 8px; }
.app-content::-webkit-scrollbar-track { background: transparent; }
.app-content::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 9999px; }
/* 吸顶/吸底兼容:滚动容器仅左右padding,由首位可见子元素提供上间距(统一,各页面沿用) */
.app-content > :first-child:not(style):not(script),
.app-content > style:first-child + *:not(script) {
margin-top: var(--content-padding);
}
/* 页脚 */
.app-footer {
height: 25px; background: var(--bg-1);
border-top: 1px solid var(--border-1);
display: flex; align-items: center; justify-content: space-between;
padding: 0 24px; flex-shrink: 0;
font-size: 13px; color: var(--text-3);
}
/* ===== 卡片 ===== */
.card {
background: var(--bg-1);
border: 1px solid var(--border-1);
border-radius: var(--radius-lg);
overflow: hidden;
}
.card-header {
padding: 0 16px;
border-bottom: 1px solid var(--border-1);
display: flex; align-items: center; justify-content: space-between;
height: 40px;
}
/* 标题栏可换行(查看页等操作按钮较多时使用) */
.card-header--wrap { height: auto; min-height: 40px; flex-wrap: wrap; row-gap: 8px; padding-top: 6px; padding-bottom: 6px; }
.card-title { font-size: 15px; font-weight: 600; color: var(--text-1); display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.card-title > svg { width: 16px; height: 16px; flex: none; color: var(--primary); }
.card-body { padding: 20px; }
.card-footer { padding: 12px 20px; border-top: 1px solid var(--border-1); }
/* ===== 卡片标题右侧: 元信息(单号+复制按钮) + 操作按钮 (通用组件, 所有页面可复用) ===== */
/* 允许换行 + 可收缩: 避免标题/单号过长时与右侧按钮组"文字重合" */
.card-header-right {
display: flex; align-items: center; gap: 12px; row-gap: 6px;
margin-left: auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end;
}
.card-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 卡片标题旁的一句话说明（系统统一，如「点击订单号进入详情页」）：紧随标题，灰字小号 */
.card-header-hint { margin-left: 12px; font-size: 12px; color: var(--text-3); font-weight: 400; }
/* 查看页: 内部Tab区域与上方汇总留白; 卡片底部留白(查看页无吸底操作栏) */
.order-detail-page .card-body { padding-bottom: 20px; }
.detail-page .card-body { padding-bottom: 20px; }
/* ===== 员工查看页：顶部一览（头像/姓名/编号/部门/职位/在职状态） ===== */
.emp-overview { display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin-bottom: 14px;
border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--bg-2); }
.emp-overview .emp-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none;
background: var(--bg-3); border: 1px solid var(--border-1); }
.emp-overview .emp-avatar--empty { display: flex; align-items: center; justify-content: center;
color: var(--text-3); font-size: 22px; font-weight: 600; }
.emp-overview .emp-name { font-size: 18px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 8px; }
.emp-overview .emp-sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.emp-overview .emp-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: var(--text-2); }
.order-detail-page .detail-tabs-wrap { margin-top: 20px; }
/* ===== 订舱托书(托书)页: 与订单创建/编辑页一致的排版布局, 打印友好 ===== */
.booking-letter-page .card-body { padding-bottom: 12px; }
/* 1. 标题(顶部居中 + 实线分割) */
.booking-letter-page .bl-title { text-align: center; padding: 4px 0 12px; border-bottom: 2px solid var(--text-1); margin-bottom: 14px; }
.booking-letter-page .bl-title-cn { font-size: 24px; font-weight: 700; letter-spacing: 8px; color: var(--text-1); }
.booking-letter-page .bl-title-en { font-size: 13px; letter-spacing: 6px; color: var(--text-2); margin-top: 2px; }
/* 2. 收发货人信息(左右对半) */
.booking-letter-page .bl-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.booking-letter-page .bl-parties-left { min-width: 0; }
.booking-letter-page .bl-parties-right { text-align: right; font-size: 12.5px; line-height: 1.9; color: var(--text-2); border-left: 1px dashed var(--border-1); padding-left: 24px; }
.booking-letter-page .bl-cn { color: var(--primary); font-weight: 700; }
.booking-letter-page .bl-print-same { display: none; color: var(--danger); font-weight: 700; font-size: 13px; }
.booking-letter-page .bl-party-ta { min-height: 72px; line-height: 1.6; resize: vertical; }
.booking-letter-page .bl-booking-no { font-size: 14px; color: var(--text-1); margin-bottom: 8px; }
.booking-letter-page .bl-booking-no b { font-family: var(--font-mono); }
.booking-letter-page .bl-logo { max-height: 84px; max-width: 280px; object-fit: contain; margin: 4px 0 8px; }
.booking-letter-page .bl-logo--empty { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 12px; background: var(--primary-1); color: var(--primary); font-size: 34px; font-weight: 700; }
.booking-letter-page .bl-co-name { font-size: 16px; font-weight: 700; color: var(--text-1); }
.booking-letter-page .bl-co-en { font-size: 13px; color: var(--text-1); }
.booking-letter-page .bl-co-line { color: var(--text-2); }
/* 段落标题里的按钮 / 附加说明 */
.booking-letter-page .bl-toggle { margin-left: auto; flex: none; }
.booking-letter-page .bl-toggle--empty { color: var(--text-3); opacity: .7; }
.booking-letter-page .bl-sec-extra { font-size: 12px; font-weight: 400; color: var(--text-3); margin-left: auto; }
/* 段落编号：CSS 计数器，隐藏的段落不占号（打印时自动连续） */
.booking-letter-page { counter-reset: blsec; }
.booking-letter-page .section-title { counter-increment: blsec; }
.booking-letter-page .bl-sec-no::before { content: counter(blsec) ". "; }
/* 订舱信息备注：高度与普通输入框一致(单行高)，节省纵向空间 */
.booking-letter-page .form-textarea.bl-note-input { height: 32px; min-height: 32px; padding: 0 8px; line-height: 30px; resize: none; }
/* 特殊货物 */
.booking-letter-page .bl-brand-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); margin-left: 8px; }
.booking-letter-page .bl-brand-wrap .input-clear-wrap { width: 180px; flex: none; }
.booking-letter-page .bl-brand-input { width: 180px; }
/* 表格 */
.booking-letter-page .bl-table th, .booking-letter-page .bl-table td { vertical-align: middle; }
.booking-letter-page .bl-empty-cell { text-align: center; color: var(--text-3); padding: 14px; }
.booking-letter-page .bl-total td { font-weight: 600; background: var(--bg-2); }
/* 9. 声明与签章(三列) */
.booking-letter-page .bl-declare-grid { display: grid; grid-template-columns: 60px 1fr 320px; border: 1px solid var(--border-1); border-radius: var(--radius-md); overflow: hidden; }
.booking-letter-page .bl-declare-note { writing-mode: vertical-rl; text-orientation: upright; display: flex; align-items: center; justify-content: center; letter-spacing: 2px; font-size: 12px; font-weight: 700; color: var(--text-1); padding: 10px 0; border-right: 1px solid var(--border-1); background: var(--bg-2); }
.booking-letter-page .bl-declare-body { padding: 12px 14px; font-size: 12.5px; color: var(--text-2); line-height: 1.85; border-right: 1px solid var(--border-1); }
.booking-letter-page .bl-declare-body p { margin: 0 0 10px; }
.booking-letter-page .bl-declare-body p:last-child { margin-bottom: 0; }
.booking-letter-page .bl-declare-sign { padding: 12px 14px; display: flex; flex-direction: column; }
.booking-letter-page .bl-sign-label { font-size: 12.5px; color: var(--text-1); font-weight: 600; }
.booking-letter-page .bl-sign-for { font-size: 12px; color: var(--text-3); font-style: italic; margin-top: 8px; }
.booking-letter-page .bl-sign-co { font-size: 12.5px; color: var(--primary); font-weight: 600; font-style: italic; }
.booking-letter-page .bl-sign-seal { min-height: 60px; display: flex; align-items: center; justify-content: center; margin: 4px 0; }
.booking-letter-page .bl-sign-seal img { max-height: 74px; max-width: 180px; object-fit: contain; }
.booking-letter-page .bl-sign-line { border-bottom: 2px dotted var(--text-2); height: 4px; }
.booking-letter-page .bl-sign-caption { text-align: right; font-size: 11.5px; color: var(--text-3); font-style: italic; margin-top: 2px; }
.booking-letter-page .bl-sign-date { margin-top: 14px; font-size: 12.5px; color: var(--text-1); }
.booking-letter-page .bl-sign-date b { font-family: var(--font-mono); }
/* 折叠按钮箭头翻转 */
.booking-letter-page .bl-toggle svg { transition: transform .2s; }
.booking-letter-page .bl-toggle.collapse-toggle--collapsed svg { transform: rotate(-90deg); }
@media (max-width: 720px) {
.booking-letter-page .bl-parties { grid-template-columns: 1fr; }
.booking-letter-page .bl-parties-right { border-left: 0; border-top: 1px dashed var(--border-1); padding-left: 0; padding-top: 12px; text-align: left; }
.booking-letter-page .bl-declare-grid { grid-template-columns: 1fr; }
.booking-letter-page .bl-declare-note { writing-mode: horizontal-tb; border-right: 0; border-bottom: 1px solid var(--border-1); }
.booking-letter-page .bl-declare-body { border-right: 0; border-bottom: 1px solid var(--border-1); }
}
/* 托书打印：区块不跨页、打印固定多列版式 */
@media print {
.booking-letter-page .bl-parties, .booking-letter-page .bl-declare-grid { page-break-inside: avoid; }
.booking-letter-page .section-title { page-break-after: avoid; }
.booking-letter-page .bl-parties { grid-template-columns: 1fr 1fr !important; }
.booking-letter-page .bl-parties-right { border-left: 1px dashed var(--border-1) !important; border-top: 0 !important; text-align: right !important; padding-left: 24px !important; padding-top: 0 !important; }
.booking-letter-page .bl-declare-grid { grid-template-columns: 60px 1fr 320px !important; }
.booking-letter-page .bl-declare-note { writing-mode: vertical-rl !important; text-orientation: upright !important; border-right: 1px solid var(--border-1) !important; border-bottom: 0 !important; }
.booking-letter-page .bl-declare-body { border-right: 1px solid var(--border-1) !important; border-bottom: 0 !important; }
/* 收起的区块打印时也展开 */
.booking-letter-page .is-collapsed { display: block !important; }
.booking-letter-page .bl-toggle { display: none !important; }
.booking-letter-page .bl-input, .booking-letter-page .bl-remarks { border-color: var(--border-1) !important; background: transparent !important; }
/* 打印隐藏输入框引导词(placeholder) */
.booking-letter-page input::placeholder, .booking-letter-page textarea::placeholder { color: transparent !important; opacity: 0 !important; }
/* 打印隐藏操作列/删除按钮/空态提示 */
.booking-letter-page .col-actions, .booking-letter-page .action-delete,
.booking-letter-page .bl-empty-cell { display: none !important; }
/* 通知人为空时，打印显示 SAME AS CONSIGNEE（业务默认值，非引导词） */
.booking-letter-page .bl-print-same { display: block !important; }
/* 单选按钮组：打印只显示选中项，未选中的不显示 */
.booking-letter-page .radio-item:not(.checked) { display: none !important; }
/* 是/否单开关：打印显示当前状态文字(选中=是 / 未选=否)，去掉按钮外观 */
.booking-letter-page .bool-switch--single .bool-switch__btn {
padding: 0 !important; border: 0 !important; background: transparent !important;
color: var(--text-1) !important; font-size: 13px !important;
}
.booking-letter-page .bool-switch--single .bool-switch__btn::before { display: none !important; }
.booking-letter-page .bool-switch--single .bool-switch__btn:not(.is-active) { font-size: 0 !important; }
.booking-letter-page .bool-switch--single .bool-switch__btn:not(.is-active)::after { content: '否'; font-size: 13px; }
/* 无数据的段落(货物尺寸/分单配置/提货信息)打印时整段隐藏 */
.booking-letter-page .bl-sec-empty { display: none !important; }
/* A4 四周页边距 0.5cm（打印内容区 padding） */
body:has(.booking-letter-page) .app-content { padding: 0.5cm !important; }
.booking-letter-page .card, .booking-letter-page .card-body { margin: 0 !important; padding: 0 !important; }
.booking-letter-page .bl-title { padding-top: 0 !important; }
}
/* ===== 空运提单(Air Waybill / 中性提单) 版式 =====
* 严格对照 AWB-中性提单扫描.pdf：预印红墨边框/栏名 + 黑字填写值；
* 斜切标签条(.awb-tag)、橡皮章圆角框(.awb-stamp)、虚线(.awb-dot)、底纹行(.awb-shade)、
/* 空运主单 AWB 版式：尺寸严格按 IATA Resolution 600a Attachment "A"《AIR WAYBILL TECHNICAL SPECIFICATIONS》
（参考 sdtetlb20061_en.pdf）：
· 整张提单外沿 宽 208–230 mm（8.2–9 in）、长 274–305 mm（10.8–12 in）；
· 所有栏位尺寸及其距纸张左上角的位置，以 4.23 mm（1/6 in）网格为准。
这里取规范下限宽 208 mm，行高按同比例放大，整张约 208 × 290 mm（落在规范区间内）。
整张提单由多张分栏表拼成一整张单据，货物区竖向引导线(.awb-guide)。 */
.awb-page { --awb-ink: #c8102e; --awb-ink-2: #eaa8b2;
background: #fff; color: #111; font-size: 10px; line-height: 1.2;
width: 208mm; max-width: 100%; margin: 0 auto; page-break-inside: avoid; }
.awb-page .awb-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.awb-page .awb-tbl td { border: 1px solid var(--awb-ink); padding: 2px 3px; vertical-align: top; }
/* 上下相邻的分栏表：去掉后表首行上边框，避免双线 */
.awb-page .awb-tbl + .awb-tbl > tbody > tr:first-child > td { border-top: 0; }
.awb-page .awb-lbl { color: var(--awb-ink); font-size: 7.5px; line-height: 1.15; }
.awb-page .awb-note { font-size: 6.6px; line-height: 1.28; color: var(--awb-ink); }
.awb-page .awb-sub { font-size: 6.5px; }
.awb-page .awb-c { text-align: center; }
.awb-page .awb-box { min-height: 13px; }
/* 顶部 STAPLE 撕线带（下沿为齿孔虚线） */
.awb-staple { display: flex; justify-content: space-between; align-items: center;
background: #f9e4e6; border: 1px solid var(--awb-ink); border-bottom: 1px dashed var(--awb-ink); padding: 1px 8px;
font-size: 6.5px; color: var(--awb-ink); }
.awb-staple-title { font-weight: 700; font-size: 9px; letter-spacing: 2px; }
/* Not Negotiable / Air Waybill / Issued by */
.awb-issued { padding: 0 !important; }
.awb-issued-hd { padding: 2px 3px 0; }
.awb-issued-title { display: block; font-size: 15px; font-weight: 700; color: var(--awb-ink); line-height: 1.1; }
.awb-issued-body { padding: 4px 3px; }
/* 斜切标签条：梯形（底宽顶窄），侧边斜角按扫描件量取 ≈24°，标签带高约 13px（在单元格顶部） */
.awb-page .awb-tag { position: relative; padding-top: 1px;
background-image: linear-gradient(to bottom, transparent 12px, var(--awb-ink) 12px, var(--awb-ink) 13px, transparent 13px); }
.awb-page .awb-tag::before, .awb-page .awb-tag::after {
content: ''; position: absolute; top: 0; height: 13px; width: 1px; background: var(--awb-ink); }
.awb-page .awb-tag::before { left: 0; transform: skewX(-24deg); transform-origin: bottom left; }
.awb-page .awb-tag::after { right: 0; transform: skewX(24deg); transform-origin: bottom right; }
/* 橡皮章圆角框：Requested Flight/Date、Optional Shipping Information */
.awb-stamp { border: 1px solid var(--awb-ink); border-radius: 12px; padding: 1px 6px; margin: 1px 3px; }
/* 虚线（签名栏） */
.awb-dot { border-bottom: 1px dotted var(--awb-ink); }
/* 底纹行 */
.awb-shade { background: rgba(187, 95, 114, .10); }
/* 货物区：列分隔用双线（扫描件为双细线），并保留竖向引导线 */
.awb-page .awb-goods td { border-right: 3px double var(--awb-ink); }
.awb-page .awb-goods td:last-child { border-right: 1px solid var(--awb-ink); }
.awb-page .awb-goods tr:first-child td { border-right: 1px solid var(--awb-ink); }
/* Rate / Charge 格内的斜线 */
.awb-page .awb-slash { background-image: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--awb-ink) 50%, transparent calc(50% + 1px)); }
/* Rate Class 下的 Commodity Item No. 子框 */
.awb-page .awb-subbox { border: 1px solid var(--awb-ink); margin: 2px -3px -2px; padding: 1px 0; font-size: 6.5px; }
/* 行高：按 Appendix "A" 的实测外沿 208 × 284.6mm（提单本体 274mm + 顶部撕线带 10.6mm，
全长 = 67.3 个 4.23mm 网格单位）等比分配，整张严格落在规范 208–230 × 274–305mm 内。 */
.awb-h-ship { height: 18mm; } .awb-h-cons { height: 16.5mm; } .awb-h-agent { height: 10.5mm; }
.awb-h-ap { height: 9mm; } .awb-h-dest { height: 9mm; } .awb-h-hand { height: 15mm; }
.awb-h-goods { height: 33.2mm; } .awb-h-marks { height: 11mm; } .awb-h-cert { height: 22mm; }
.awb-h-sign { height: 8mm; } .awb-h-exec { height: 8mm; } .awb-h-last { height: 11mm; }
.awb-original { font-weight: 700; letter-spacing: 2px; color: var(--awb-ink); }
.awb-bottom { padding: 2px 6px; border: 1px solid var(--awb-ink); border-top: 0; }
.awb-original { font-weight: 700; letter-spacing: 2px; color: var(--awb-ink); }
.awb-bottom { display: flex; justify-content: space-between; align-items: center;
padding: 2px 6px; border: 1px solid var(--awb-ink); border-top: 0; }
/* 填写版：栏位内嵌无边框输入框，页面即一张真实提单填写页 */
.awb-page--form .awb-input { display: block; width: 100%; border: 0; background: transparent; color: #111;
font-size: 10px; line-height: 1.2; padding: 1px; font-family: inherit; box-sizing: border-box; }
.awb-page--form .awb-input:focus { outline: 1px solid var(--primary); background: #fffbe6; }
.awb-page--form .awb-input::placeholder { color: #c9a6a2; }
.awb-page--form .awb-textarea { resize: vertical; min-height: 13px; }
/* 行内填空框（Executed on/at、Signature 等下划线栏位）：不占整行，宽度自适应 */
.awb-page--form .awb-input--inline { display: inline-block; width: auto; min-width: 46px; max-width: 62%;
border-bottom: 1px dotted var(--awb-ink); }
.awb-page--form .awb-select { appearance: auto; }
/* ===== 订单对账单页: 单据版式(对照《客户对账单模版参考.pdf》) ===== */
.order-statement-page .card-body { padding-bottom: 10px; }
.order-statement-page .stm-doc { padding: 0 0 4px; }
.order-statement-page .stm-doc--break { page-break-after: always; }
.order-statement-page .stm-doc + .stm-doc { margin-top: 18px; border-top: 1px dashed var(--border-2); padding-top: 14px; }
/* 抬头 */
.order-statement-page .stm-head { display: flex; align-items: center; gap: 16px; }
.order-statement-page .stm-head-logo { flex: none; width: 120px; }
.order-statement-page .stm-head-logo img { max-width: 120px; max-height: 52px; }
.order-statement-page .stm-head-co { flex: 1; min-width: 0; }
.order-statement-page .stm-co-cn { font-size: 19px; font-weight: 700; color: var(--text-1); line-height: 1.35; }
.order-statement-page .stm-co-en { font-size: 12.5px; color: var(--text-2); line-height: 1.35; }
.order-statement-page .stm-co-addr { font-size: 12px; color: var(--text-3); line-height: 1.35; }
/* 分隔线 */
.order-statement-page .stm-rule { border-top: 1px solid var(--text-2); }
.order-statement-page .stm-rule--double { border-top: 3px double var(--text-2); }
.order-statement-page .stm-rule--dashed { border-top: 1px dashed var(--border-2); }
.order-statement-page .stm-doc-title { text-align: center; font-size: 17px; font-weight: 700; letter-spacing: 2px; color: var(--text-1); padding: 7px 0; }
/* 信息区: 标签定宽右对齐, 冒号成一条竖线 */
.order-statement-page .stm-info2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 3px 0; }
.order-statement-page .stm-info3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; padding: 3px 0; }
.order-statement-page .stm-line { display: flex; align-items: baseline; font-size: 12.5px; line-height: 1.45; padding: 2px 0; border-bottom: 1px dashed var(--border-1); }
.order-statement-page .stm-line:last-child { border-bottom: none; }
.order-statement-page .stm-lb { flex: none; width: 104px; text-align: right; color: var(--text-3); }
.order-statement-page .stm-vl { flex: 1 1 auto; min-width: 0; padding-left: 6px; color: var(--text-1); word-break: break-word; }
.order-statement-page .stm-vl--strong { font-weight: 600; }
.order-statement-page .stm-right { text-align: right; }
/* 区块标题 */
.order-statement-page .stm-sec-title { text-align: center; font-size: 14px; font-weight: 700; letter-spacing: 1px; color: var(--text-1); padding: 8px 0 5px; }
.order-statement-page .stm-sec-title--left { text-align: left; font-size: 13px; padding: 7px 0 4px; }
/* 费用明细表(紧凑) */
.order-statement-page .stm-table { border: none; table-layout: fixed; }
.order-statement-page .stm-table th,
.order-statement-page .stm-table td { padding: 5px 8px; font-size: 12.5px; white-space: normal; word-break: break-word; }
.order-statement-page .stm-table td.col-num { white-space: nowrap; }
.order-statement-page .stm-table th { background: transparent; border-bottom: 1px solid var(--text-2); color: var(--text-2); font-weight: 600; text-align: left; }
.order-statement-page .stm-table th.col-num { text-align: right; }
.order-statement-page .stm-table td { border-bottom: 1px dashed var(--border-1); }
.order-statement-page .stm-subtotal td { background: var(--bg-2); color: var(--text-2); }
.order-statement-page .stm-total-row td { border-top: 1px solid var(--text-2); border-bottom: none; padding-top: 7px; }
.order-statement-page .stm-upper { text-align: right; font-size: 12px; color: var(--text-2); }
/* 收款账户: 用户要求单列显示(不再左右分栏) */
.order-statement-page .stm-pay-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.order-statement-page .stm-pay-grid .stm-lb { width: 150px; }
/* 温馨提示 */
.order-statement-page .stm-notice-body { font-size: 12px; color: var(--text-2); line-height: 1.7; }
/* ===== 员工对账单 ===== */
/* 表头表单: 4 行 × 5 列, 复用系统 .form-row/.form-group/.form-label(标签在上、内容在下)
按用户要求不加输入框边框, 只保留「名称：+ 内容」的排布 */
.order-statement-page .stm-form { padding: 2px 0 0; }
.order-statement-page .stm-form .form-row { gap: 12px; }
.order-statement-page .stm-form .form-group { margin-bottom: 10px; }
.order-statement-page .stm-form .form-label { font-size: 11.5px; color: var(--text-3); margin-bottom: 1px; font-weight: 500; }
.order-statement-page .stm-form .form-static { min-height: 0; padding: 0 0 3px; font-size: 12.5px; line-height: 1.5; color: var(--text-1); }
/* 员工单行距统一: 航期/货物参数、汇总、签字等处与表头表单/明细表保持同一字号档 */
.order-statement-page .stm-doc--staff .stm-info3 .stm-line,
.order-statement-page .stm-doc--staff .stm-info3 .stm-lb { font-size: 11.5px; }
.order-statement-page .stm-doc--staff .stm-sec-title { font-size: 12.5px; }
/* 费用明细(应收/应付): 列同订单查看页, 13 列, 字号再收一档 */
.order-statement-page .stm-table--charges th,
.order-statement-page .stm-table--charges td { padding: 4px 5px; font-size: 11px; }
/* 汇总 */
.order-statement-page .stm-summary { padding: 2px 0 4px; }
.order-statement-page .stm-sum-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; padding: 3px 0; }
.order-statement-page .stm-sum-grid .stm-lb { width: 66px; }
.order-statement-page .stm-sum-grid .stm-vl { font-size: 13px; }
.order-statement-page .stm-sum-note { font-size: 11.5px; color: var(--text-3); padding: 2px 0 0 66px; }
/* 签字栏: 上方留 2 行空白便于签字, 下方也留出余量 */
.order-statement-page .stm-sign { display: flex; flex-wrap: wrap; gap: 16px 40px; padding: 44px 0 22px; font-size: 12.5px; color: var(--text-2); }
.order-statement-page .stm-sign-item { display: inline-flex; align-items: flex-end; gap: 6px; }
.order-statement-page .stm-sign-line { display: inline-block; width: 140px; height: 18px; border-bottom: 1px solid var(--text-2); }
/* 顶部切换: 单据语言 + 对账单选择 */
.order-statement-page .stm-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--bg-2); }
.order-statement-page .stm-lang { display: flex; align-items: center; gap: 10px; }
.order-statement-page .stm-lang-label { font-size: 12px; color: var(--text-3); }
.order-statement-page .stm-lang-seg { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-1); }
.order-statement-page .stm-lang-btn { padding: 5px 18px; font-size: 13px; line-height: 1.5; text-decoration: none; color: var(--text-2); background: var(--bg-1); transition: all .15s; }
.order-statement-page .stm-lang-btn + .stm-lang-btn { border-left: 1px solid var(--border-2); }
.order-statement-page .stm-lang-btn:hover { color: var(--primary); }
.order-statement-page .stm-lang-btn.is-active { background: var(--primary); color: #fff; font-weight: 600; }
.order-statement-page .stm-tabs-wrap { border-top: 1px dashed var(--border-2); padding-top: 9px; }
.order-statement-page .stm-tabs-title { font-size: 12px; color: var(--text-3); margin-bottom: 8px; line-height: 1.6; }
.order-statement-page .stm-tabs-title b { color: var(--primary); }
.order-statement-page .stm-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.order-statement-page .stm-tab { display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; text-decoration: none; border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--bg-1); transition: all .15s; }
.order-statement-page .stm-tab:hover { border-color: var(--primary); }
.order-statement-page .stm-tab.is-active { border-color: var(--primary); background: var(--primary-1); }
.order-statement-page .stm-tab-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.order-statement-page .stm-tab-name { font-size: 13px; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-statement-page .stm-tab-tag { flex: none; padding: 0 6px; font-size: 11px; line-height: 16px; border-radius: 3px; background: var(--primary-1); color: var(--primary-6); }
.order-statement-page .stm-tab-amt { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-statement-page .stm-tab.is-active .stm-tab-amt { color: var(--primary-6); font-weight: 600; }
/* 窄屏: 只作用于屏幕。必须限定 screen —— 否则打印/导出 PDF 时纸张宽度(A4 纵向约 794px)
会命中该断点, 把单据的信息区压成单列, 打印出来就"全部变 1 列"了。 */
@media screen and (max-width: 900px) {
.order-statement-page .stm-info2,
.order-statement-page .stm-info3,
.order-statement-page .stm-sum-grid { grid-template-columns: 1fr; }
.order-statement-page .stm-form .form-row { flex-wrap: wrap; }
.order-statement-page .stm-form .form-group { flex: 1 1 calc(50% - 12px); }
.order-statement-page .stm-lb,
.order-statement-page .stm-pay-grid .stm-lb { width: 96px; }
}
/* 打印 / 导出 PDF
页边距设为 0: Chrome 在页边距为 0 时不再打印自带的页眉(日期+标题)与页脚(网址+页码);
留白改由内容区 .app-content 的 padding 提供(见本段下方的 .app-content 规则)。
⚠ 不要改用「具名页」(@page stmt + page: stmt) 去只给对账单设边距 ——
Chrome 132 遇到具名页会多插一个强制分页, 对账单第 1 页只排到一半就空白换页(第 2 页接剩余内容)。 */
@page { size: A4 portrait; margin: 0; }
@media print {
/* 只打印单据本身: 卡片标题/单号区、语言与账单切换区、底部操作栏、消息提示弹窗全部不打印 */
.order-statement-page .card-header,
.order-statement-page .stm-bar,
.order-statement-page .save-bar,
.message-container,
.modal-mask { display: none !important; }
.order-statement-page .stm-info2 { grid-template-columns: 1fr 1fr !important; }
.order-statement-page .stm-info3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.order-statement-page .stm-sum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.order-statement-page .stm-pay-grid { grid-template-columns: 1fr !important; }
.order-statement-page .stm-lb { width: 104px !important; }
/* 员工单表头表单: 打印时压缩行高, 保证一张 A4 装得下 */
.order-statement-page .stm-form .form-row { gap: 8px; }
.order-statement-page .stm-form .form-group { margin-bottom: 4px; }
.order-statement-page .stm-form .form-label { font-size: 10px; margin-bottom: 0; }
.order-statement-page .stm-form .form-static { min-height: 0; padding: 0 0 2px; font-size: 11px; line-height: 1.45; }
.order-statement-page .stm-doc--staff .stm-info3 .stm-line,
.order-statement-page .stm-doc--staff .stm-info3 .stm-lb { font-size: 10.5px; }
.order-statement-page .stm-doc--staff .stm-sec-title { font-size: 11.5px; }
.order-statement-page .stm-sign { padding: 30px 0 16px; }
.order-statement-page .stm-sum-grid .stm-lb { width: 60px !important; }
.order-statement-page .stm-sum-grid .stm-vl { font-size: 12px; }
.order-statement-page .stm-sign-line { width: 118px; }
.order-statement-page .stm-pay-grid .stm-lb { width: 150px !important; }
/* 单据行距在打印时收紧, 给一张 A4 留出富余量 */
.order-statement-page .stm-doc { padding: 0; }
.order-statement-page .stm-doc + .stm-doc { margin-top: 0; border-top: none; padding-top: 0; }
.order-statement-page .stm-head-logo img { max-height: 40px; }
.order-statement-page .stm-co-cn { font-size: 16px; }
.order-statement-page .stm-doc-title { font-size: 15px; padding: 4px 0; }
.order-statement-page .stm-sec-title { font-size: 13px; padding: 5px 0 3px; }
.order-statement-page .stm-info2,
.order-statement-page .stm-info3,
.order-statement-page .stm-line { padding: 1px 0; }
.order-statement-page .stm-table th,
.order-statement-page .stm-table td { padding: 3px 6px; font-size: 11.5px; }
.order-statement-page .stm-table--charges th,
.order-statement-page .stm-table--charges td { padding: 3px 4px; font-size: 10.5px; }
.order-statement-page .stm-sum-grid { padding: 1px 0; }
.order-statement-page .stm-sum-note { padding-left: 70px; }
.order-statement-page .stm-notice-body { font-size: 11.5px; line-height: 1.45; }
.order-statement-page .stm-sec-title,
.order-statement-page .stm-doc-title { page-break-after: avoid; }
.order-statement-page .stm-pay,
.order-statement-page .stm-notice,
.order-statement-page .stm-summary,
.order-statement-page .stm-sign { page-break-inside: avoid; }
/* 表格滚动容器(.data-table-scroll / .dynamic-table-wrap 及其内层 .data-table-wrapper)带边框 + overflow:hidden,
而滚动容器在分页时无法被正确拆分: Chrome 会把它的边框一路画到页面底部,
并让表格在错误的位置断开、下半页整片留空(对账单"空白换页"的根因)。
打印时还原成普通块 —— 不裁剪、去边框、去圆角, 表格才能正常跨页。 */
.data-table-scroll,
.data-table-scroll .data-table-wrapper,
.form-page .dynamic-table-wrap,
.form-page .dynamic-table-wrap .data-table-wrapper { overflow: visible !important; border: none !important; border-radius: 0 !important; }
/* 表单页动态表格打印: 取消固定列宽/吸顶列, 按纸张宽度自适应, 操作列不打印 */
.form-page .dynamic-table-wrap .data-table { table-layout: auto !important; min-width: 0 !important; width: 100% !important; font-size: 11px; }
.form-page .dynamic-table-wrap .data-table th,
.form-page .dynamic-table-wrap .data-table td { white-space: normal !important; }
.form-page .dynamic-table-wrap .data-table .col-no,
.form-page .dynamic-table-wrap .data-table .col-actions { position: static !important; }
.form-page .dynamic-table-wrap .data-table .col-actions { display: none !important; }
}
.card-header-meta {
display: flex; align-items: center; gap: 16px; row-gap: 4px;
font-size: 12px; color: var(--text-3); min-width: 0; flex-wrap: wrap;
}
/* 单个元信息项内部不折行(标签与单号保持同行); 空间不够时由外层 flex-wrap 整块换行 */
.card-header-meta .meta-item { display: inline-flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.card-header-meta .meta-value {
font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-1);
overflow-wrap: anywhere;
}
.copy-icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; padding: 0; flex: none;
border: none; background: transparent; border-radius: 4px;
color: var(--text-3); cursor: pointer; transition: var(--transition);
}
.copy-icon-btn svg { width: 13px; height: 13px; }
.copy-icon-btn:hover:not([disabled]) { color: var(--primary); background: var(--bg-3); }
.copy-icon-btn[disabled] { opacity: .35; cursor: not-allowed; }
/* ===== 吸顶/吸底统一组件(所有页面直接沿用) =====
页面主卡片加 .sticky-card: 标题自动吸顶;表单操作栏加 .save-bar 自动吸底;列表页分页自动吸底
标题栏与操作栏高度统一 40px */
.sticky-card { overflow: visible; }
.sticky-card > .card-header {
position: sticky; top: 0;
z-index: 30;
background: var(--bg-1);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* 填充吸顶时圆角缺口,阻止滚动内容从圆角处露出 */
.sticky-card > .card-header::before {
content: '';
position: absolute;
top: calc(-1 * var(--radius-lg));
left: 0; right: 0; bottom: 0;
background: var(--bg-1);
z-index: -1;
pointer-events: none;
}
.save-bar {
position: sticky; bottom: 0;
z-index: 30;
display: flex; gap: 8px; justify-content: flex-end; align-items: center;
height: 40px; padding: 0; margin-top: 12px;
border-top: 1px solid var(--border-1);
background: var(--bg-1);
}
/* 吸底操作栏 - 左右分组(查看页等) */
.save-bar--split { justify-content: space-between; height: auto; min-height: 40px; padding: 4px 0; }
.save-bar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 右侧按钮组（保存栏内的主/次操作；全系统沿用此命名） */
.save-bar__right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
/* 非吸底操作栏(编辑页与「保存」栏同页时使用) */
.save-bar--static { position: static; }
/* 相关单据快捷入口 */
.doc-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.doc-links .btn { font-size: 12px; }
/* 订单操作栏弹窗: 订舱申请方式选择 / 制作提单单据选择 */
.oab-choice { display: flex; flex-direction: column; gap: 10px; }
.oab-choice-btn {
display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
width: 100%; padding: 14px 16px; text-align: left; cursor: pointer;
border: 1px solid var(--border-1); border-radius: var(--radius-md);
background: var(--bg-1); transition: all .15s;
}
.oab-choice-btn:hover { border-color: var(--primary); background: var(--primary-1); }
.oab-choice-btn svg { width: 18px; height: 18px; color: var(--primary); }
.oab-choice-title { font-size: 14px; font-weight: 600; color: var(--text-1); }
.oab-choice-desc { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.oab-bills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.oab-bill-btn {
display: flex; align-items: center; gap: 8px;
padding: 12px 14px; font-size: 13px; text-decoration: none;
border: 1px solid var(--border-1); border-radius: var(--radius-md);
background: var(--bg-1); color: var(--text-1); transition: all .15s;
}
.oab-bill-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-1); }
.oab-bill-btn svg { width: 16px; height: 16px; }
/* 资料操作面板（订单操作页「资料操作」弹窗）——系统统一的分区入口 */
.oo-dg-hint { font-size: 12px; color: var(--text-3); margin-bottom: 12px; line-height: 1.5; }
.oo-dg { margin-bottom: 16px; }
.oo-dg-title {
font-size: 13px; font-weight: 600; color: var(--text-1);
margin-bottom: 8px; padding-left: 8px; border-left: 3px solid var(--primary); line-height: 1.1;
}
.oo-dg-items { display: flex; flex-wrap: wrap; gap: 8px; }
.oo-dg-item {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; font-size: 13px; cursor: pointer;
border: 1px solid var(--border-1); border-radius: var(--radius-md);
background: var(--bg-1); color: var(--text-1); transition: all .15s;
}
.oo-dg-item:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-1); }
.oo-dg-ic { display: inline-flex; width: 16px; height: 16px; }
.oo-dg-ic svg { width: 16px; height: 16px; }
/* 表单内文件上传(文件名提示) */
.upload-inline { display: flex; align-items: center; gap: 8px; }
.upload-inline .form-input { flex: 1; padding: 4px 8px; height: auto; line-height: 22px; }
.upload-inline .upload-file-name { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.pagination-wrapper {
position: sticky; bottom: 0;
z-index: 20;
background: var(--bg-2);
border-top: 1px solid var(--border-1);
padding: 8px 0;
}
/* ===== 表格 ===== */
.table-wrapper { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; }
.table-toolbar {
padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
border-bottom: 1px solid var(--border-1);
}
.table-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.table-actions { display: flex; align-items: center; gap: 8px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
background: var(--bg-3); color: var(--text-2); font-weight: 500;
padding: 10px 12px; text-align: left; white-space: nowrap;
border-bottom: 1px solid var(--border-1); position: sticky; top: 0; z-index: 1;
}
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-1); color: var(--text-1); }
/* ===== 系统级表头排序（th[data-sort] 后追加的上/下三角按钮，core.js FQA.initTableSort）=====
* 服务端按 GET sort/dir 白名单排序；默认灰三角、悬停/激活主色。 */
.th-sort { display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; margin-left: 5px; vertical-align: middle; }
.th-sort__btn { display: flex; align-items: center; justify-content: center; width: 14px; height: 9px; padding: 0; border: 0; background: none; cursor: pointer; }
.th-sort__btn::before { content: ''; display: block; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.th-sort__btn.th-sort__asc::before { border-bottom: 5px solid var(--text-3); }
.th-sort__btn.th-sort__desc::before { border-top: 5px solid var(--text-3); }
.th-sort__btn:hover.th-sort__asc::before { border-bottom-color: var(--primary); }
.th-sort__btn:hover.th-sort__desc::before { border-top-color: var(--primary); }
.th-sort--active.th-sort--asc .th-sort__asc::before { border-bottom-color: var(--primary); }
.th-sort--active.th-sort--desc .th-sort__desc::before { border-top-color: var(--primary); }
/* ===== 表格整行底色体系：斑马纹 + 悬停（吸附列与整行必须同色）=====
* 背景：吸附列(col-sticky-left/right)必须有**实心**底色才能盖住横向滚动的内容，
* 但它必须与同一行普通单元格**完全同色**；历史 bug 就是只在吸附列上写了
* 斑马纹/悬停色，普通单元格没有，于是同一行左右出现两种底色。
* 做法：底色统一定义在「行」上（--row-bg），普通单元格与吸附列都读同一个变量，
* 以后只改这一处，不会再漂移。
* 规则：奇数行 白(--bg-1) / 偶数行 浅灰(--bg-2) / 悬停 浅蓝(--primary-1)。 */
.data-table tbody tr { --row-bg: var(--bg-1); background: var(--row-bg); transition: background 120ms ease; }
.data-table tbody tr:nth-child(even) { --row-bg: var(--bg-2); }
.data-table tbody tr:hover { --row-bg: var(--primary-1); }
/* 行内「固定/吸附」单元格跟随整行底色（斑马纹与悬停一起跟随）。
* transition 必须和行保持同一时长：否则行在 120ms 渐变、吸附列却瞬间变色，
* 悬停瞬间会出现左右短暂"两种底色"的闪烁。 */
.data-table tbody .col-sticky-left,
.data-table tbody .col-sticky-right,
.data-table tbody .col-no,
.data-table tbody .col-actions { background: var(--row-bg, var(--bg-1)); transition: background 120ms ease; }
.data-table tbody tr:last-child td { border-bottom: none; }
/* ===== 表格行内操作按钮(系统统一) =====
* 用法:
* |
*
*
*
* |
* 语义类(悬停统一为「实心填充 + 白色图标 + 投影」, 各语义色见下):
* action-view 查看 | action-edit 编辑 | action-copy 复制 | action-print 打印
* action-export 导出 | action-download 下载 | action-more 更多 → 主色
* action-approve 通过/成功 → 成功色
* action-warn 警告操作 → 警告色
* action-delete / action-danger 删除等危险操作 → 危险色
*/
.data-table .col-num { text-align: right; white-space: nowrap; }
.data-table .col-actions { white-space: nowrap; text-align: right; }
.data-table .col-actions a,
.data-table .col-actions button {
--action-color: var(--primary);
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: var(--radius-sm);
border: none; background: transparent; cursor: pointer;
color: var(--text-3); vertical-align: middle;
transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.data-table .col-actions a:hover,
.data-table .col-actions button:hover {
background: var(--action-color); color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.data-table .col-actions a svg,
.data-table .col-actions button svg { width: 15px; height: 15px; }
/* 语义色 */
.data-table .col-actions .action-view,
.data-table .col-actions .action-edit,
.data-table .col-actions .action-copy,
.data-table .col-actions .action-print,
.data-table .col-actions .action-export,
.data-table .col-actions .action-download,
.data-table .col-actions .action-more { --action-color: var(--primary); }
.data-table .col-actions .action-approve { --action-color: var(--success); }
.data-table .col-actions .action-warn { --action-color: var(--warning); }
.data-table .col-actions .action-delete,
.data-table .col-actions .action-danger { --action-color: var(--danger); }
/* 锁定态操作(如：订单费用未审核不可编辑) —— 置灰不可点 */
.data-table .col-actions .action-locked { --action-color: var(--text-4); color: var(--text-4); cursor: not-allowed; }
.data-table .col-actions .action-locked:hover { background: var(--bg-3); color: var(--text-3); box-shadow: none; }
/* 相邻按钮间距 */
.data-table .col-actions > * + * { margin-left: 2px; }
/* 分页 (系统统一)
* 布局: 左侧 "共X条/当前页汇总" | 右侧 [页码导航] [每页条数] [跳转页码] */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; flex-wrap: wrap; }
.pagination-info { font-size: 13px; color: var(--text-3); }
.pagination-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pagination button {
min-width: 32px; height: 32px; padding: 0 6px; border: 1px solid var(--border-1);
background: var(--bg-1); border-radius: var(--radius-sm);
cursor: pointer; color: var(--text-1); font-size: 13px;
display: inline-flex; align-items: center; justify-content: center;
transition: all var(--transition);
}
.pagination button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pagination button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination button:disabled { color: var(--text-4); cursor: not-allowed; background: var(--bg-2); }
.pagination button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.pagination .per-page-select { width: auto; min-width: 104px; height: 32px; font-size: 13px; margin-left: 8px; }
/* 跳转页码输入框(无"跳至"文字) */
.pagination-jump { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 13px; color: var(--text-3); white-space: nowrap; }
.page-jump-input {
width: 56px; height: 32px; padding: 0 6px; text-align: center;
border: 1px solid var(--border-2); border-radius: var(--radius-sm);
background: var(--bg-1); color: var(--text-1); font-size: 13px;
transition: all var(--transition);
}
.page-jump-input:hover { border-color: var(--primary-5); }
.page-jump-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(22,119,255,0.2); }
.page-jump-input::-webkit-inner-spin-button,
.page-jump-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.page-jump-input { -moz-appearance: textfield; }
/* ===== 表单 ===== */
.form-group { margin-bottom: 12px; }
.form-label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; font-weight: 500; }
.form-label .required { color: var(--danger); margin-left: 4px; }
/* 只读字段值(查看/详情页统一使用, 与 .form-label 配套: 标签在上, 值在下) */
.form-static {
min-height: 20px; padding: 6px 0;
font-size: 13px; color: var(--text-1); line-height: 1.6;
word-break: break-word; white-space: pre-wrap;
}
.form-static--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.form-static--empty { color: var(--text-3); }
.form-static--strong { font-weight: 600; }
/* 订单查看/订单追踪/订舱托书: 表单区只读值按「输入框」观感呈现(与新建/编辑页表单一致, 避免整页纯文字显得单调)
仅作用于 .form-group 内的字段值, 不影响表格单元格里复用 .form-static 的说明文字 */
.order-detail-page .form-group > .form-static,
.order-tracking-page .form-group > .form-static,
.booking-letter-page .form-group > .form-static,
.detail-page .form-group > .form-static {
min-height: 32px; padding: 5px 10px;
border: 1px solid var(--border-1); border-radius: var(--radius-md);
background: var(--bg-3); line-height: 20px;
}
.form-input, .form-select, .form-textarea {
width: 100%; height: 32px; padding: 0 8px;
border: 1px solid var(--border-2); border-radius: var(--radius-md);
background: var(--bg-1); color: var(--text-1); font-size: 13px;
transition: all var(--transition);
}
.form-input:hover, .form-select:hover { border-color: var(--primary-5); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
border-color: var(--primary); outline: none;
box-shadow: 0 0 0 2px rgba(22,119,255,0.2);
}
.form-input:disabled { background: var(--bg-4); color: var(--text-4); cursor: not-allowed; }
.form-textarea { height: auto; min-height: 80px; padding: 8px 12px; resize: vertical; }
.form-error { font-size: 12px; color: var(--danger); margin-top: 4px; }
/* ===== 输入框+下拉框组件 ===== */
.input-with-dropdown {
position: relative;
width: 100%;
}
.input-with-dropdown input[type="text"] {
width: 100%;
height: 32px;
padding: 0 28px 0 8px;
border: 1px solid var(--border-2);
border-radius: var(--radius-md);
background: var(--bg-1);
color: var(--text-1);
font-size: 13px;
box-sizing: border-box;
transition: border-color var(--transition), box-shadow var(--transition);
}
.input-with-dropdown input[type="text"]:hover {
border-color: var(--primary-5);
}
.input-with-dropdown input[type="text"]:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(22,119,255,0.15);
}
.input-with-dropdown input[type="text"]:disabled {
background: var(--bg-4);
color: var(--text-4);
cursor: not-allowed;
}
.input-with-dropdown .dropdown-list {
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 200px;
overflow-y: auto;
background: var(--bg-1);
border: 1px solid var(--border-2);
border-top: none;
border-radius: 0 0 var(--radius-md) var(--radius-md);
box-shadow: 0 4px 8px rgba(0,0,0,0.08);
z-index: 1000;
display: none;
list-style: none;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.input-with-dropdown .dropdown-list.show {
display: block !important;
}
.input-with-dropdown .dropdown-list li {
padding: 6px 8px;
cursor: pointer;
white-space: nowrap;
font-size: 13px;
color: var(--text-2);
list-style: none;
transition: background 80ms;
}
.input-with-dropdown .dropdown-list li:hover {
background: var(--primary-1);
color: var(--primary);
}
.input-with-dropdown .dropdown-list li.active-item {
background: var(--primary-1);
color: var(--primary);
font-weight: 500;
}
.input-with-dropdown .dropdown-list li.no-match {
color: var(--text-4);
cursor: default;
text-align: center;
padding: 8px;
}
/* 选项颜色圆点：option 带 data-color 时由 core.js 渲染（颜色选择等场景） */
.input-with-dropdown .dropdown-list li .iwd-color-dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 6px;
vertical-align: -2px;
border: 1px solid var(--border-2);
}
.input-with-dropdown .dropdown-list::-webkit-scrollbar { width: 6px; }
.input-with-dropdown .dropdown-list::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 9999px; }
/* 滚动容器内的iwd: dropdown使用fixed定位避免被overflow裁剪(position由JS动态计算) */
.input-with-dropdown.iwd-in-scroll .dropdown-list { z-index: 9999; }
/* 向上展开时(窗口下方放不下): 边框/圆角翻到上边，视觉上仍与输入框相连 */
.input-with-dropdown .dropdown-list.drop-up {
border-top: 1px solid var(--border-2);
border-bottom: none;
border-radius: var(--radius-md) var(--radius-md) 0 0;
box-shadow: 0 -4px 8px rgba(0,0,0,0.08);
}
/* 清空按钮 */
.input-clear-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
background: transparent;
border: none;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
color: var(--text-3);
transition: all 0.15s ease;
z-index: 5;
padding: 0;
margin: 0;
flex-shrink: 0;
}
.input-clear-btn:hover {
background: var(--danger);
color: #fff;
}
.input-clear-btn.show {
display: flex !important;
}
/* 只读(disabled)的 input-with-dropdown：不提供清除入口，与只读输入框规则一致 */
.input-clear-btn[data-iwd-readonly] {
display: none !important;
}
/* 通用输入框清除按钮包裹器(非input-with-dropdown的文本/数字输入框) */
.input-clear-wrap {
position: relative;
width: 100%;
}
.input-clear-wrap .form-input {
padding-right: 28px;
}
/* 数字输入框去除上下箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
/* 隐藏被转换的原始select */
select.form-select-iwd-hidden {
display: none !important;
}
/* 表单行: 同一行的 N 列【等分且不折行】。
注意: 不要给 .form-group 写 flex-basis 定值(如 1 1 220px) —— 列数多时(如货物参数 6 列)
会因 6×220+间隙 超过容器宽度而把最后一列挤到独立一行。防止内容溢出靠 min-width:0。 */
.form-row { display: flex; gap: 16px; }
.form-row .form-group { flex: 1; min-width: 0; }
/* ===== 按钮 ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 32px; padding: 0 16px; border: 1px solid var(--border-2);
border-radius: var(--radius-md); background: var(--bg-1); color: var(--text-1);
font-size: 14px; cursor: pointer; transition: all var(--transition); white-space: nowrap;
}
.btn:hover { border-color: var(--primary-5); color: var(--primary); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-7); border-color: var(--primary-7); color: #fff; }
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-success { color: var(--success); border-color: var(--success); }
.btn-success:hover { background: var(--success); color: #fff; }
.btn-sm { height: 24px; padding: 0 8px; font-size: 13px; }
.btn-lg { height: 40px; padding: 0 20px; font-size: 16px; }
/* 审批通过 / 驳回: 弹窗底部等文字按钮场景(与 .btn-success/.btn-danger 同色系, 语义更明确)
注意: 列表操作列(.col-actions)统一用图标按钮, 见上方 .data-table .col-actions 规范 */
.btn-approve { color: var(--success); border-color: var(--success); }
.btn-approve:hover { background: var(--success); border-color: var(--success); color: #fff; }
.btn-reject { color: var(--danger); border-color: var(--danger); }
.btn-reject:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-link { border: none; background: transparent; color: var(--primary); padding: 0 4px; }
.btn-link:hover { color: var(--primary-7); }
/* ===== 状态标签 ===== */
.tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 0 8px; height: 22px; border-radius: var(--radius-sm);
font-size: 12px; line-height: 1;
}
/* 标签行(查看页状态标签等) */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag-success { background: rgba(82,196,26,0.1); color: var(--success); }
.tag-warning { background: rgba(250,173,20,0.1); color: var(--warning); }
.tag-danger { background: rgba(255,77,79,0.1); color: var(--danger); }
.tag-info { background: rgba(22,119,255,0.1); color: var(--primary); }
.tag-default { background: var(--bg-4); color: var(--text-2); }
/* ===== 消息提示 ===== */
.message-container { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.message {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px; border-radius: var(--radius-md);
background: var(--bg-1); border: 1px solid var(--border-1);
box-shadow: var(--shadow-2); font-size: 14px; color: var(--text-1);
animation: msgIn 200ms ease-out;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.message-success { border-color: var(--success); }
.message-success .message-icon { color: var(--success); }
.message-warning { border-color: var(--warning); }
.message-warning .message-icon { color: var(--warning); }
.message-error { border-color: var(--danger); }
.message-error .message-icon { color: var(--danger); }
.message-info { border-color: var(--primary); }
.message-info .message-icon { color: var(--primary); }
/* ===== 弹窗 ===== */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; display: flex; align-items: center; justify-content: center; animation: maskIn 200ms; }
/* 二级弹窗: 需要在已打开的弹窗之上时使用(如「详情弹窗 → 审批弹窗」) */
.modal-mask--top { z-index: 1100; }
@keyframes maskIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
background: var(--bg-1); border-radius: var(--radius-lg);
box-shadow: var(--shadow-3); min-width: 400px; max-width: 90vw; max-height: 90vh;
display: flex; flex-direction: column; animation: modalIn 200ms ease-out;
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border-1); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 16px; font-weight: 600; }
.modal-close { cursor: pointer; color: var(--text-3); }
.modal-close:hover { color: var(--text-1); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--border-1); display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* ===== 空状态 ===== */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; color: var(--text-3); }
.empty-state .empty-icon { width: 48px; height: 48px; margin-bottom: 12px; opacity: 0.4; }
.empty-state .empty-text { font-size: 14px; }
/* ===== 统计卡片 ===== */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 20px; }
/* 统计卡片栅格(查看页/看板通用) */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media screen and (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 6 卡一行修饰符(客户贡献值等 6 卡列表页)：固定 6 列保证不换行；
内边距收窄到 14px，给「币种 + 金额」留横向空间；
窄屏回退 3 列(≤1400px) / 2 列(≤900px)。 */
.stat-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stat-grid--6 .stat-card { padding: 14px 16px; }
/* 6 卡一行时数值行：统一 24px + 固定高度底对齐 —— 普通值/金额值字号不一、行高不同，
会让每张卡底部「说明小字」上下错位（用户 2026-10-17 报过），固定数值行高度后
.stat-trend 严格落在同一水平线上（同首页 .dash-page 的做法）。 */
.stat-grid--6 .stat-card .stat-value { font-size: 24px; height: 38px; display: flex; align-items: flex-end; line-height: 1.2; }
.stat-grid--6 .stat-card .stat-value--money { font-size: 24px; align-items: baseline; line-height: 1.25; }
@media screen and (max-width: 1400px) { .stat-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media screen and (max-width: 900px) { .stat-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 5 卡一行(发票中心 本月/本年 各 5 张)：窄屏回退 3/2 列 */
.stat-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat-grid--5 .stat-card { padding: 14px 16px; }
.stat-grid--5 .stat-card .stat-value { font-size: 22px; height: 36px; display: flex; align-items: flex-end; line-height: 1.2; }
.stat-grid--5 .stat-card__value { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-grid--5 .stat-card .stat-value--money { font-size: 22px; align-items: baseline; line-height: 1.25; }
@media screen and (max-width: 1200px) { .stat-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media screen and (max-width: 900px) { .stat-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 多币种金额明细(卡片内一行一币种) */
.cur-lines { display: flex; flex-direction: column; gap: 6px; }
.cur-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cur-line .cur { font-size: 12px; color: var(--text-3); font-family: var(--font-mono); }
.cur-line .amt { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text-1); }
.cur-line.is-neg .amt { color: var(--danger); }
.cur-line.is-total { border-top: 1px dashed var(--border-1); padding-top: 6px; margin-top: 2px; }
.stat-card .stat-label { font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.stat-card .stat-card__label { font-size: 13px; color: var(--text-3); }
.stat-card .stat-value { font-size: 24px; font-weight: 600; color: var(--text-1); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 「币种 + 金额」型指标值：币种做小号前缀，整行**不换行**（换行视觉很差），
* 金额过长时省略号兜底而不是折行。 */
.stat-card .stat-value--money {
display: flex; align-items: baseline; gap: 4px; flex-wrap: nowrap;
font-size: 20px; white-space: nowrap; line-height: 1.25;
}
.stat-card .stat-value--money .stat-cur {
flex: none; font-size: 10px; font-weight: 500; color: var(--text-3);
font-family: var(--font-mono); letter-spacing: .3px;
}
.stat-card .stat-value--money .stat-num {
flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat-card .stat-trend { font-size: 12px; margin-top: 8px; }
.stat-trend.up { color: var(--success); }
.stat-trend.down { color: var(--danger); }
/* ===== 客户等级徽标（排名 + 等级；客户贡献值列表 / 客户详情通用） =====
* 等级由系统自动计算，徽标颜色固定：钻石 蓝 / VVIP 紫 / 铂金 青 / 黄金 橙 / 白银 灰 / 青铜 棕 */
.lv-badge {
display: inline-flex; align-items: center; justify-content: center;
padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
line-height: 18px; white-space: nowrap; vertical-align: middle;
}
/* 排名徽标：小圆片纯数字（1 / 2 / 13），不再用「#1」井号表达（用户 2026-10-17：# 太难看）；
悬浮 title 由输出方带「排名第N」。列表/客户详情页通用。 */
.lv-rank {
flex: none; display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 17px; padding: 0 6px; margin-right: 4px;
border-radius: 999px; background: var(--bg-3); color: var(--text-2);
font-size: 11px; font-weight: 600; font-family: var(--font-mono); vertical-align: middle;
}
.lv-diamond { background: #e0edff; color: #2563eb; }
.lv-vvip { background: #f3e8ff; color: #7c3aed; }
.lv-platinum { background: #ccfbf1; color: #0f766e; }
.lv-gold { background: #fef3c7; color: #b45309; }
.lv-silver { background: #e2e8f0; color: #475569; }
.lv-bronze { background: #ffedd5; color: #9a3412; }
/* 排名/等级紧凑条（客户详情「客户贡献值与客户等级」区，2026-10-17 用户：原 4 列大盒子太空太难看）：
一行药丸 = 指标名 + 排名圆片(.lv-rank) + 等级徽标(.lv-badge)，自动换行、高度随内容 */
.cv-rank-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 2px 0 12px; }
.cv-rank-strip__item { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--border-1); border-radius: 10px; background: var(--bg-2); }
.cv-rank-strip__label { font-size: 12px; color: var(--text-2); }
.cv-rank-strip__item--overall { background: var(--primary-1); border-color: var(--primary-2); }
.cv-rank-strip__item--overall .cv-rank-strip__label { color: var(--primary-7); font-weight: 600; }
/* 可点选标签组（单选/多选 chips，表单页编辑用；客户公开反馈页有同款 .fb-chip 独立样式）
2026-10-17 满意度/投诉字段丰富化：服务项逐项评分、做得好/需改进/涉及环节多选 */
.cc-chip-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.cc-chip-name { font-size: 13px; color: var(--text-2); min-width: 84px; }
.cc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-chip { font-size: 13px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--bg-1); color: var(--text-2); cursor: pointer; user-select: none; transition: color .13s, border-color .13s, background .13s; }
.cc-chip:hover { border-color: var(--primary-5); color: var(--primary-5); }
.cc-chip.on { background: var(--primary-1); border-color: var(--primary-5); color: var(--primary-5); font-weight: 600; }
/* ===== 响应式 ===== */
@media screen and (max-width: 1200px) {
:root { --content-padding: 12px; }
}
@media screen and (max-width: 992px) {
.sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; transform: translateX(-100%); width: var(--sidebar-width); }
.sidebar.show { transform: translateX(0); }
}
@media screen and (max-width: 768px) {
:root { --content-padding: 10px; }
.header-datetime { display: none; }
.data-table { font-size: 13px; }
.modal { min-width: auto; width: 95vw; }
.form-row { flex-direction: column; gap: 0; }
}
/* 滚动条全局 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-3); }
/* SVG图标默认 */
svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm svg { width: 14px; height: 14px; }
.icon-lg svg { width: 24px; height: 24px; }
/* ===== P1 组件补全：2026设计规范 ===== */
/* 搜索栏 */
/* 数据表格 */
.data-table-wrapper { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; }
.data-table--compact td, .data-table--compact th { padding: 6px 12px; }
.data-table--comfortable td, .data-table--comfortable th { padding: 14px 12px; }
/* 分组表头(thead 两行, 如「预计/实际」分组):
表头第二行若也吸顶会与第一行重叠, 故整块表头改为随内容滚动; 序号列/操作列仍左右固定 */
.data-table--grouped-head thead th { position: static; }
.data-table--grouped-head thead th.col-no { position: sticky; top: auto; left: 0; z-index: 3; }
.data-table--grouped-head thead th.col-actions { position: sticky; top: auto; right: 0; z-index: 3; }
.col-checkbox { text-align: center; width: 40px; }
.col-checkbox input { cursor: pointer; }
.table-sort-icon { display: inline-flex; margin-left: 4px; opacity: 0.4; cursor: pointer; vertical-align: middle; }
.table-sort-icon svg { width: 12px; height: 12px; }
th[data-sortable]:hover .table-sort-icon { opacity: 1; }
.table-loading, .table-empty { text-align: center; padding: 32px 12px; color: var(--text-3); font-size: 14px; }
.table-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border-2); border-top-color: var(--primary); border-radius: 50%; animation: cbSpin 600ms linear infinite; vertical-align: middle; margin-right: 8px; }
@keyframes cbSpin { to { transform: rotate(360deg); } }
.pagination-ellipsis { color: var(--text-3); padding: 0 4px; }
.pagination-jumper { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.pagination-jump-input { width: 56px; height: 32px; border: 1px solid var(--border-1); border-radius: var(--radius-sm); text-align: center; background: var(--bg-1); color: var(--text-1); font-size: 13px; }
.pagination-jump-label { font-size: 13px; color: var(--text-3); white-space: nowrap; }
/* 表单构建器 */
.form-builder { display: flex; flex-direction: column; gap: 16px; }
.form-group-section { border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 20px; background: var(--bg-1); }
.form-group-title { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border-1); }
.form-row-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-builder__actions { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.form-help { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.form-radio, .form-checkbox { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 14px; cursor: pointer; }
.form-radio input, .form-checkbox input { cursor: pointer; }
.form-switch { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.form-switch input { opacity: 0; width: 0; height: 0; }
.form-switch-slider { position: absolute; inset: 0; background: var(--border-2); border-radius: 9999px; transition: var(--transition); }
.form-switch-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: var(--transition); }
.form-switch input:checked + .form-switch-slider { background: var(--primary); }
.form-switch input:checked + .form-switch-slider::before { transform: translateX(18px); }
.date-range-input { display: flex; align-items: center; gap: 6px; }
.date-range-sep { color: var(--text-3); font-size: 13px; }
/* 标签页 */
.tabs { display: flex; flex-direction: column; }
.tabs__nav { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border-1); padding: 0 4px; }
.tabs--card .tabs__nav { background: var(--bg-3); padding: 8px 8px 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.tabs--border .tabs__nav { border: 1px solid var(--border-1); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 0 8px; }
.tabs__tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 14px; color: var(--text-2); cursor: pointer; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: all 150ms ease; white-space: nowrap; position: relative; }
.tabs__tab:hover { color: var(--text-1); }
.tabs__tab--active { color: var(--primary); font-weight: 500; }
.tabs--line .tabs__tab--active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); }
.tabs--card .tabs__tab { border: 1px solid transparent; }
.tabs--card .tabs__tab--active { background: var(--bg-1); border-color: var(--border-1); border-bottom-color: var(--bg-1); }
.tabs--border .tabs__tab { border: 1px solid transparent; border-bottom: none; margin-bottom: -1px; }
.tabs--border .tabs__tab--active { background: var(--bg-1); border-color: var(--border-1); }
.tabs__tab-icon svg { width: 14px; height: 14px; }
.tabs__tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9999px; background: var(--danger); color: #fff; font-size: 11px; }
.tabs__tab-close { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; }
.tabs__tab-close svg { width: 12px; height: 12px; }
.tabs__tab-close:hover { background: var(--border-2); }
.tabs__content { padding: 16px 0; }
.tabs__pane { animation: tabFade 200ms ease-out; }
/* 字段权限：不可写字段的只读外观（设计文档 §11.5 read/masked） */
.form-input.fp-readonly,
.form-select.fp-readonly,
.fp-readonly input,
.fp-readonly .form-input {
background: var(--bg-3);
color: var(--text-2);
cursor: not-allowed;
}
.fp-readonly-group .form-label { color: var(--text-2); }
.fp-readonly-tag { margin-left: 6px; font-size: 11px; padding: 0 4px; }
/* 链接式页签（服务端 ?tab= 切换）：与客户端页签共用 .tabs 视觉，避免出现第二套页签样式 */
.tabs--nav {
flex: none;
position: sticky;
top: 0;
z-index: 40;
background: var(--bg-1);
box-shadow: 0 1px 0 var(--border-1);
}
.tabs--nav .tabs__nav { padding: 0 4px; background: var(--bg-1); }
a.tabs__tab { text-decoration: none; color: var(--text-2); }
a.tabs__tab:hover { color: var(--text-1); }
a.tabs__tab.tabs__tab--active { color: var(--primary); font-weight: 500; }
.tabs--nav + .list-page, .tabs--nav + .table-wrapper { margin-top: 0; }
@keyframes tabFade { from { opacity: 0; } to { opacity: 1; } }
/* ===== 状态步骤条(系统统一组件) =====
* 线性流程可视化：订单22态流转 / 审批流 / 任意多阶段状态机。
* 结构：.status-steps > .status-steps__group(阶段) > .status-steps__group-label + .status-steps__list > .status-step
* 步骤态：.status-step--done(已过) / .status-step--current(当前) / .status-step--future(未到) / .status-step--danger(终止态)
* 连接线：.status-step__conn(+ .status-step__conn--done)
* 用法：
*/
.status-steps { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 2px 0 4px; }
.status-steps__group { display: flex; flex-direction: column; gap: 8px; flex: none; padding: 0 8px; }
.status-steps__group:first-child { padding-left: 0; }
.status-steps__group + .status-steps__group { border-left: 1px dashed var(--border-1); }
.status-steps__group-label { font-size: 11px; font-weight: 600; color: var(--text-3); text-align: center; letter-spacing: .5px; }
.status-steps__group--active .status-steps__group-label { color: var(--primary); }
.status-steps__list { display: flex; align-items: flex-start; }
.status-step { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 46px; flex: none; }
.status-step__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-2); background: var(--bg-1); color: var(--text-3); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; transition: all .2s; }
.status-step__dot svg { width: 11px; height: 11px; }
.status-step__label { font-size: 11px; color: var(--text-3); text-align: center; line-height: 1.25; max-width: 56px; word-break: break-all; }
.status-step--done .status-step__dot { background: var(--success); border-color: var(--success); color: #fff; }
.status-step--done .status-step__label { color: var(--text-2); }
.status-step--current .status-step__dot { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-1); }
.status-step--current .status-step__label { color: var(--primary); font-weight: 600; }
.status-step--danger .status-step__dot { background: var(--danger); border-color: var(--danger); color: #fff; }
.status-step--danger .status-step__label { color: var(--danger); }
.status-step__conn { flex: none; width: 12px; height: 2px; background: var(--border-1); margin-top: 8px; }
.status-step__conn--done { background: var(--success); }
/* 弹窗内步骤条：宽度有限，按阶段整组换行，避免横向截断 */
.modal .status-steps { flex-wrap: wrap; overflow-x: visible; row-gap: 12px; }
/* 流程信息卡：阶段指引 + 步骤条 统一容器 */
.flow-info-card { border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--bg-1); overflow: hidden; }
.flow-info-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--bg-2); border-bottom: 1px solid var(--border-1); flex-wrap: wrap; }
.flow-info-card__title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-1); }
.flow-info-card__title svg { width: 15px; height: 15px; color: var(--primary); }
.flow-info-card__body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.flow-guide { display: flex; flex-direction: column; gap: 6px; }
.flow-guide__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flow-guide__phase { font-size: 15px; font-weight: 600; color: var(--text-1); }
.flow-guide__tip { font-size: 13px; color: var(--text-2); }
.flow-guide__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flow-guide__actions-label { font-size: 12px; color: var(--text-3); }
.flow-guide__sep { border-top: 1px dashed var(--border-1); }
/* ===== 状态按钮组(系统统一组件) =====
* 把多态状态渲染成可点击按钮组：节点状态/目标状态选择等。
* 用法：…
* 选中态：.active（配合 --done 绿 / --danger 红 语义色）
*/
.op-status-btn-group { display: flex; gap: 6px; flex-wrap: wrap; }
.op-status-btn { padding: 6px 14px; border: 1px solid var(--border-1); border-radius: var(--radius-md); background: var(--bg-1); color: var(--text-2); font-size: 13px; cursor: pointer; transition: all .15s; font-family: inherit; line-height: 1.4; }
.op-status-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-1); }
.op-status-btn.active { border-color: var(--primary); background: var(--primary); color: #fff; }
.op-status-btn--done.active { border-color: var(--success); background: var(--success); color: #fff; }
.op-status-btn--danger.active { border-color: var(--danger); background: var(--danger); color: #fff; }
/* 弹窗扩展 */
.modal--sm { min-width: 320px; max-width: 480px; }
.modal--md { min-width: 480px; max-width: 720px; }
.modal--lg { min-width: 720px; max-width: 960px; }
.modal--xl { min-width: 960px; max-width: 1200px; }
.modal--xxl { width: 95vw; max-width: 1600px; }
/* 弹窗表单网格：两列表单，宽字段用 .pc-col-span-2 跨列。
全系统弹窗表单统一使用该组件，勿在单页内重复定义。 */
.pc-modal-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 18px;
}
.pc-modal-grid > .form-group { margin-bottom: 0; min-width: 0; }
/* 3/4 列变体：用于「按行分区」的弹窗（如三单匹配账单头：3列一行、4列一行） */
.pc-modal-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-modal-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pc-modal-grid .pc-col-span-2 { grid-column: 1 / -1; }
/* 全宽字段：`full` 是历史写法（联系人/合同/权限规则弹窗在用），此前没有对应样式 →
* 那些"备注/合同名称"被挤在半列里，看起来排版不合理。这里统一补齐（与 .pc-col-span-2 等价）。 */
.pc-modal-grid > .full { grid-column: 1 / -1; }
/* 弹窗里的分区标题（多字段弹窗按区段分组，与表单页 .section-title 观感一致） */
.pc-modal-grid > .pc-section { grid-column: 1 / -1; margin: 2px 0 -4px; padding-top: 6px; border-top: 1px dashed var(--border-1); font-size: 12px; font-weight: 600; color: var(--text-2); }
.pc-modal-grid > .pc-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
@media screen and (max-width: 720px) {
.pc-modal-grid { grid-template-columns: minmax(0, 1fr); }
.pc-modal-grid .pc-col-span-2,
.pc-modal-grid > .full { grid-column: auto; }
}
/* 提示组件 */
.alert { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-1); background: var(--bg-1); }
.alert--success { background: rgba(82,196,26,0.06); border-color: rgba(82,196,26,0.3); }
.alert--warning { background: rgba(250,173,20,0.06); border-color: rgba(250,173,20,0.3); }
.alert--error { background: rgba(255,77,79,0.06); border-color: rgba(255,77,79,0.3); }
.alert--info { background: rgba(22,119,255,0.06); border-color: rgba(22,119,255,0.3); }
.alert__icon { display: flex; align-items: center; flex-shrink: 0; }
.alert--success .alert__icon { color: var(--success); }
.alert--warning .alert__icon { color: var(--warning); }
.alert--error .alert__icon { color: var(--danger); }
.alert--info .alert__icon { color: var(--primary); }
.alert__content { flex: 1; }
.alert__title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.alert__message { font-size: 13px; color: var(--text-2); }
.alert__close { cursor: pointer; color: var(--text-3); display: flex; align-items: center; }
.alert__close:hover { color: var(--text-1); }
/* 面包屑 - 已整合到上方 */
.breadcrumb-icon svg { width: 14px; height: 14px; }
/* 统计卡片扩展 */
.stat-card--primary { border-left: 3px solid var(--primary); }
.stat-card--success { border-left: 3px solid var(--success); }
.stat-card--warning { border-left: 3px solid var(--warning); }
.stat-card--danger { border-left: 3px solid var(--danger); }
.stat-card--info { border-left: 3px solid var(--info, #1677ff); }
.stat-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.stat-card__icon { color: var(--text-3); }
.stat-card__value { font-size: 24px; font-weight: 600; color: var(--text-1); font-family: var(--font-mono); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-card__subtitle { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.stat-card__trend { display: flex; align-items: center; gap: 4px; font-size: 12px; margin-top: 8px; }
.stat-trend__dir { font-weight: 600; }
.stat-trend__label { color: var(--text-3); }
.stat-trend.flat { color: var(--text-3); }
/* 状态徽章 */
.status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; height: 22px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1; white-space: nowrap; }
.status-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge__icon svg { width: 12px; height: 12px; }
.status-badge--success { background: rgba(82,196,26,0.1); color: var(--success); }
.status-badge--warning { background: rgba(250,173,20,0.1); color: var(--warning); }
.status-badge--danger { background: rgba(255,77,79,0.1); color: var(--danger); }
.status-badge--info { background: rgba(22,119,255,0.1); color: var(--primary); }
.status-badge--default { background: var(--bg-4); color: var(--text-2); }
.status-badge--success .status-badge__dot { background: var(--success); }
.status-badge--warning .status-badge__dot { background: var(--warning); }
.status-badge--danger .status-badge__dot { background: var(--danger); }
.status-badge--info .status-badge__dot { background: var(--primary); }
.status-badge--default .status-badge__dot { background: var(--text-3); }
/* 文件上传 */
.file-upload { display: flex; flex-direction: column; gap: 8px; }
.file-upload--disabled { opacity: 0.5; pointer-events: none; }
.file-upload__dropzone { border: 1px dashed var(--border-2); border-radius: var(--radius-md); padding: 24px 12px; text-align: center; cursor: pointer; transition: all var(--transition); background: var(--bg-2); }
.file-upload__dropzone:hover { border-color: var(--primary); background: var(--primary-1); }
.file-upload__dropzone--drag { border-color: var(--primary); background: var(--primary-1); }
.file-upload__icon { color: var(--text-3); margin-bottom: 8px; }
.file-upload__icon svg { width: 32px; height: 32px; }
.file-upload__text { font-size: 14px; color: var(--text-2); }
.file-upload__hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.file-upload__list { display: flex; flex-direction: column; gap: 4px; }
.file-upload__item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border-1); border-radius: var(--radius-sm); background: var(--bg-1); font-size: 13px; }
.file-upload__item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-upload__item-size { color: var(--text-3); font-size: 12px; }
.file-upload__item-progress { width: 100%; height: 4px; background: var(--bg-4); border-radius: 9999px; overflow: hidden; }
.file-upload__item-progress-bar { height: 100%; background: var(--primary); transition: width 200ms; }
.file-upload__item-remove { cursor: pointer; color: var(--text-3); }
.file-upload__item-remove:hover { color: var(--danger); }
/* 空状态扩展 */
.empty-state--small { padding: 24px 12px; }
.empty-state--large { padding: 64px 20px; }
.empty-state__icon { color: var(--text-3); opacity: 0.4; margin-bottom: 12px; }
.empty-state__icon svg { width: 48px; height: 48px; }
.empty-state__title { font-size: 14px; color: var(--text-2); margin-bottom: 4px; }
.empty-state__description { font-size: 13px; color: var(--text-3); margin-bottom: 12px; }
.empty-state__action { margin-top: 8px; }
/* 抽屉 */
.drawer-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; animation: maskIn 200ms; }
.drawer { position: fixed; top: 0; bottom: 0; right: 0; background: var(--bg-1); box-shadow: var(--shadow-3); display: flex; flex-direction: column; z-index: 1001; animation: drawerIn 250ms ease-out; }
.drawer--left { right: auto; left: 0; }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer--left { animation-name: drawerInLeft; }
@keyframes drawerInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.drawer--sm { width: 360px; }
.drawer--md { width: 480px; }
.drawer--lg { width: 640px; }
.drawer--xl { width: 960px; }
.drawer-header { padding: 16px 20px; border-bottom: 1px solid var(--border-1); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.drawer-footer { padding: 12px 20px; border-top: 1px solid var(--border-1); display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
/* 步骤条 */
.steps { display: flex; }
.steps--vertical { flex-direction: column; }
.step { display: flex; align-items: center; flex: 1; }
.steps--vertical .step { flex: none; min-height: 64px; }
.step__circle { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-2); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-3); flex-shrink: 0; background: var(--bg-1); }
.step--finish .step__circle { background: var(--primary); border-color: var(--primary); color: #fff; }
.step--process .step__circle { background: var(--primary); border-color: var(--primary); color: #fff; }
.step--error .step__circle { background: var(--danger); border-color: var(--danger); color: #fff; }
.step__line { flex: 1; height: 2px; background: var(--border-2); margin: 0 8px; }
.step--finish .step__line { background: var(--primary); }
.steps--vertical .step__line { width: 2px; height: 32px; margin: 4px 0; }
.step__content { margin-left: 12px; }
.step__title { font-size: 14px; color: var(--text-1); }
.step__desc { font-size: 12px; color: var(--text-3); margin-top: 2px; }
/* 时间线 */
.timeline { display: flex; flex-direction: column; }
.timeline-item { display: flex; gap: 12px; padding-bottom: 20px; position: relative; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: 7px; top: 20px; bottom: 0; width: 2px; background: var(--border-1); }
.timeline-item:last-child::before { display: none; }
.timeline-item__dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--primary); background: var(--bg-1); flex-shrink: 0; margin-top: 2px; z-index: 1; }
.timeline-item--success .timeline-item__dot { border-color: var(--success); }
.timeline-item--warning .timeline-item__dot { border-color: var(--warning); }
.timeline-item--danger .timeline-item__dot { border-color: var(--danger); }
.timeline-item__content { flex: 1; }
.timeline-item__time { font-size: 12px; color: var(--text-3); font-family: var(--font-mono); }
.timeline-item__title { font-size: 14px; color: var(--text-1); margin-top: 2px; }
.timeline-item__desc { font-size: 13px; color: var(--text-2); margin-top: 4px; }
/* 树形控件 */
.tree { font-size: 14px; }
.tree-node { }
.tree-node__header { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.tree-node__header:hover { background: var(--bg-4); }
.tree-node__header--selected { background: var(--primary-1); color: var(--primary); }
.tree-node__toggle { display: flex; align-items: center; width: 16px; height: 16px; }
.tree-node__toggle svg { width: 12px; height: 12px; transition: transform 150ms; }
.tree-node--expanded .tree-node__toggle svg { transform: rotate(90deg); }
.tree-node__checkbox { cursor: pointer; }
.tree-node__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tree-node__children { padding-left: 20px; }
/* 骨架屏 */
.skeleton { display: block; background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-4) 37%, var(--bg-3) 63%); background-size: 400% 100%; animation: skeleton 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 20px; width: 50%; margin-bottom: 12px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
/* 描述列表 */
.descriptions { border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; }
.descriptions__title { padding: 12px 20px; border-bottom: 1px solid var(--border-1); font-size: 15px; font-weight: 600; background: var(--bg-3); }
.descriptions__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.descriptions__item { display: flex; border-bottom: 1px solid var(--border-1); }
.descriptions__item:nth-child(2n) { border-left: 1px solid var(--border-1); }
.descriptions__label { padding: 12px 16px; background: var(--bg-3); color: var(--text-2); font-size: 13px; min-width: 120px; flex-shrink: 0; }
.descriptions__value { padding: 12px 16px; color: var(--text-1); font-size: 13px; flex: 1; }
/* 徽章 */
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 500; line-height: 1; }
.badge--primary { background: var(--primary); }
.badge--success { background: var(--success); }
.badge--warning { background: var(--warning); }
/* 折叠面板 */
.collapse { border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; }
.collapse__item { border-bottom: 1px solid var(--border-1); }
.collapse__item:last-child { border-bottom: none; }
.collapse__header { padding: 12px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; }
.collapse__header:hover { background: var(--bg-3); }
.collapse__arrow { transition: transform 150ms; }
.collapse__item--expanded .collapse__arrow { transform: rotate(180deg); }
.collapse__body { padding: 0 16px 12px; display: none; }
.collapse__item--expanded .collapse__body { display: block; }
/* 进度条 */
.progress { display: flex; align-items: center; gap: 8px; }
.progress__bar { flex: 1; height: 8px; background: var(--bg-4); border-radius: 9999px; overflow: hidden; }
.progress__inner { height: 100%; background: var(--primary); border-radius: 9999px; transition: width 300ms; }
.progress--success .progress__inner { background: var(--success); }
.progress--danger .progress__inner { background: var(--danger); }
.progress__label { font-size: 12px; color: var(--text-3); min-width: 36px; text-align: right; }
/* 工具提示 */
.tooltip { position: relative; display: inline-flex; }
.tooltip__content { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--text-1); color: var(--bg-1); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 150ms; z-index: 999; }
.tooltip:hover .tooltip__content { opacity: 1; }
/* 响应式补充 */
@media screen and (max-width: 768px) {
.form-row-wrap { grid-template-columns: 1fr !important; }
.descriptions__grid { grid-template-columns: 1fr; }
.descriptions__item:nth-child(2n) { border-left: none; }
.tabs__nav { overflow-x: auto; }
.stat-row { grid-template-columns: 1fr; }
.drawer, .drawer--sm, .drawer--md, .drawer--lg, .drawer--xl { width: 100vw; }
}
/* ===== 2026企业级设计令牌补充 ===== */
/* 金额列等宽字体 */
.amount, .tabular-nums, [data-field="amount"], [data-field="total_revenue"], [data-field="total_cost"],
[data-field="gross_profit"], [data-field="balance"], [data-field="settled_amount"], [data-field="paid_amount"] {
font-variant-numeric: tabular-nums;
text-align: right;
}
/* 表格行hover增强 */
.data-table thead th { background: var(--bg-2, #fafafa); font-weight: 500; }
/* Tabs标签栏样式 (高度30px) */
.tabs-container { display: flex; align-items: center; flex: 1; height: 30px; background: var(--bg-1); border-bottom: 1px solid var(--border-2); padding: 0 12px; overflow: hidden; }
.tabs-list { display: flex; align-items: center; flex: 1; overflow-x: auto; gap: 4px; }
.tabs-list::-webkit-scrollbar { height: 0; }
.tab-item { display: inline-flex; align-items: center; flex-shrink: 0; height: 24px; padding: 0 10px; font-size: 12px; border-radius: 4px; cursor: pointer; white-space: nowrap; color: var(--text-3); transition: all 120ms; user-select: none; }
.tab-item:hover { background: var(--bg-3); color: var(--text-1); }
.tab-item.active { background: var(--primary-1); color: var(--primary-6); font-weight: 500; }
.tab-item .tab-close { display: inline-flex; margin-left: 6px; opacity: 0.5; transition: opacity 120ms; }
.tab-item .tab-close:hover { opacity: 1; }
.tab-item .tab-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.tabs-actions { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.tabs-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; color: var(--text-3); transition: all 120ms; }
.tabs-action-btn:hover { background: var(--bg-3); color: var(--text-1); }
.tabs-action-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
/* 页脚样式 (高度30px，吸底固定) */
.app-footer { display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 24px; background: var(--bg-1); border-top: 1px solid var(--border-2); position: sticky; bottom: 0; z-index: 10; }
.footer-copyright { font-size: 12px; color: var(--text-3); }
.footer-link { color: inherit; text-decoration: none; transition: color 120ms, font-weight 120ms; }
.footer-link:hover { color: var(--primary); font-weight: 600; }
.footer-version { font-size: 12px; color: var(--text-4); }
.footer-stats { display: flex; gap: 16px; }
.footer-stat-item { font-size: 12px; color: var(--text-3); }
.footer-stat-item strong { color: var(--text-1); font-weight: 500; }
.app-footer:empty { height: 0; border: none; padding: 0; }
/* 三级菜单样式 */
.menu-group { margin-bottom: 4px; }
.menu-group.expanded .menu-children { display: block; }
.menu-group:not(.expanded) .menu-children { display: none; }
.menu-arrow { margin-left: auto; transition: transform 120ms; }
.menu-group.expanded .menu-arrow { transform: rotate(180deg); }
.menu-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.menu-children { padding-left: 0; }
.menu-subgroup { margin-bottom: 2px; }
.menu-subgroup-title { display: flex; align-items: center; padding: 6px 12px; font-size: 13px; color: var(--text-3); cursor: pointer; border-radius: 4px; transition: background 120ms; }
.menu-subgroup-title:hover { background: var(--bg-3); }
.menu-subgroup.expanded .menu-grandchildren { display: block; }
.menu-subgroup:not(.expanded) .menu-grandchildren { display: none; }
.menu-grandchildren { padding-left: 8px; }
/* 虚拟滚动表格样式 */
.data-table-virtual { border: 1px solid var(--border-2); border-radius: var(--radius-md); overflow: hidden; }
.dtv-header { background: var(--bg-2); border-bottom: 1px solid var(--border-2); overflow: hidden; }
.dtv-header-row { display: flex; }
.dtv-cell { padding: 0 12px; font-size: 13px; border-right: 1px solid var(--border-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtv-header-cell { font-weight: 500; color: var(--text-2); line-height: 40px; background: var(--bg-2); }
.dtv-sortable { cursor: pointer; }
.dtv-sortable:hover { background: var(--bg-3); }
.dtv-sortable.sorted-asc::after { content: ' ↑'; color: var(--primary-6); }
.dtv-sortable.sorted-desc::after { content: ' ↓'; color: var(--primary-6); }
.dtv-body-wrap { overflow: hidden; }
.dtv-viewport { overflow-y: auto; overflow-x: hidden; }
.dtv-content { will-change: transform; }
.dtv-row { display: flex; border-bottom: 1px solid var(--border-1); transition: background 120ms; }
.dtv-row:hover { background: #f0f5ff; }
.dtv-row-stripe { background: var(--bg-2); }
.dtv-row-stripe:hover { background: #f0f5ff; }
.dtv-amount { font-variant-numeric: tabular-nums; text-align: right; }
.dtv-fixed-left { position: sticky; left: 0; z-index: 2; background: inherit; }
.dtv-fixed-right { position: sticky; right: 0; z-index: 2; background: inherit; }
.dtv-cell-checkbox { width: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
/* 右键菜单 */
.tab-context-menu { position: fixed; z-index: 10000; background: var(--bg-1); border: 4px solid var(--border-2); border-radius: 4px; box-shadow: var(--shadow-md); min-width: 120px; padding: 4px 0; }
.ctx-menu-item { padding: 6px 16px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.ctx-menu-item:hover { background: var(--bg-3); color: var(--text-1); }
/* 侧边栏折叠态 */
.sidebar { transition: width 200ms ease; }
/* 暗黑模式切换按钮 */
.header-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 4px; cursor: pointer; color: var(--text-3); transition: all 120ms; }
.header-icon-btn:hover { background: var(--bg-3); color: var(--text-1); }
.header-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
/* ===== P2 表单创建/编辑页面通用样式 ===== */
/* 适用于所有模块的新建/编辑页面: 订单/报价/订舱/报关/对账...
* 各页面只需在根容器加 class="form-page" 即可继承所有样式 */
/* 页面布局基础 */
.form-page { padding: 0; } /* 内容区间隙统一由 app-content 控制 */
.form-page .card-body { padding-bottom: 0; } /* 吸底操作栏紧贴卡片底部,不留白 */
/* 区块标题 */
.form-page .section-title {
font-size: 14px; font-weight: 600; color: var(--primary);
margin: 16px 0 8px; padding-bottom: 6px;
border-bottom: 1px solid var(--border-1);
display: flex; align-items: center; gap: 6px;
}
.form-page .section-title:first-child { margin-top: 0; }
/* 表单行跨列: 同一行 N 列等分, 不折行(需要折行请改用 .form-row-wrap 网格) */
.form-page .form-row { display: flex; gap: 12px; margin-bottom: 0; flex-wrap: nowrap; }
.form-page .form-row .form-group { flex: 1; min-width: 0; }
.form-page .form-row .form-group.col-2 { flex: 2; }
.form-page .form-row .form-group.col-3 { flex: 3; }
.form-page .form-row .form-group.col-4 { flex: 4; }
/* 表单行：固定 4 列网格（字段跨行对齐；不足 4 个留空，隐藏字段不占位） */
.form-page .form-row.form-row--grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.form-page .form-row.form-row--grid-4 .form-group { flex: none; min-width: 0; }
@media (max-width: 1280px) { .form-page .form-row.form-row--grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .form-page .form-row.form-row--grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .form-page .form-row.form-row--grid-4 { grid-template-columns: 1fr; } }
/* 表格内 是/否 勾选（工作流节点配置等） */
.form-page .node-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-1); cursor: pointer; white-space: nowrap; }
.form-page .node-flag input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary, #2563eb); cursor: pointer; }
/* 工作流节点配置：适用订单类型多选（勾选式，比原生多选列表框更直观） */
.form-page .node-type-opts { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.form-page .node-type-opts label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-1); white-space: nowrap; cursor: pointer; }
.form-page .node-type-opts input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--primary, #2563eb); cursor: pointer; }
.form-page .node-type-all { font-size: 12px; color: var(--text-3); }
/* 单选按钮组(名称在上,选项在下; 圆圈+高亮选中态) */
.form-page .radio-group {
display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.form-page .radio-item {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 4px; cursor: pointer;
font-size: 13px; border: 1px solid var(--border-1);
background: var(--bg-1); transition: all .15s; user-select: none;
}
.form-page .radio-item:hover { border-color: var(--primary); }
.form-page .radio-item input[type="radio"] { display: none; }
.form-page .radio-item::before {
content: ''; width: 13px; height: 13px; border-radius: 50%;
border: 1.5px solid var(--border-2, #ccc); background: var(--bg-1, #fff);
flex-shrink: 0; transition: all .15s; box-sizing: border-box;
}
.form-page .radio-item.checked {
background: var(--primary); color: #fff; border-color: var(--primary);
}
.form-page .radio-item.checked::before {
background: #fff; border-color: #fff;
}
/* 布尔「是/否」按钮组（由 initBoolSwitch 自动生成，替代是/否下拉） */
.bool-switch {
display: inline-flex; border: 1px solid var(--border-1);
border-radius: 6px; overflow: hidden; background: var(--bg-1);
}
.bool-switch__btn {
padding: 6px 18px; font-size: 13px; line-height: 1.4;
border: 0; background: transparent; color: var(--text-2);
cursor: pointer; transition: all .15s; white-space: nowrap;
}
.bool-switch__btn + .bool-switch__btn { border-left: 1px solid var(--border-1); }
.bool-switch__btn:hover { color: var(--primary); }
.bool-switch__btn.is-active { background: var(--primary); color: #fff; }
.bool-switch__select { display: none !important; }
/* 单开关(系统统一)：是/否字段只显示正向标签(如「是」)，选中=是(蓝)，不选=否(灰，默认)。
全系统统一——不再显示「否/是」两个按钮。 */
.bool-switch--single { border: 0; border-radius: 0; overflow: visible; background: transparent; }
.bool-switch--single .bool-switch__btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 14px; border: 1px solid var(--border-1); border-radius: 6px;
background: var(--bg-1); color: var(--text-3);
}
.bool-switch--single .bool-switch__btn::before {
content: ''; width: 13px; height: 13px; border-radius: 50%;
border: 1.5px solid var(--border-2, #ccc); background: var(--bg-1, #fff);
box-sizing: border-box; flex-shrink: 0; transition: all .15s;
}
.bool-switch--single .bool-switch__btn:hover { color: var(--primary); border-color: var(--primary); }
.bool-switch--single .bool-switch__btn.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.bool-switch--single .bool-switch__btn.is-active::before { background: #fff; border-color: #fff; }
.bool-switch--single.is-disabled .bool-switch__btn { opacity: .6; cursor: not-allowed; }
/* 多态「状态」按钮组（由 initStatusSwitch 自动生成，替代状态下拉；支持确认/锁定/语义色） */
.status-switch {
display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.status-switch__btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 16px; font-size: 13px; line-height: 1.4;
border: 1px solid var(--border-2); border-radius: 999px;
background: var(--bg-1); color: var(--text-2);
cursor: pointer; white-space: nowrap;
transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
/* 状态点：未选中=语义色，选中=白色 */
.status-switch__btn::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--sw-color, var(--text-4)); flex: none;
}
.status-switch__btn:hover { border-color: var(--sw-color, var(--primary)); color: var(--sw-color, var(--primary)); }
.status-switch__btn.is-active {
background: var(--sw-color, var(--primary)); border-color: var(--sw-color, var(--primary));
color: #fff; font-weight: 600; box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.status-switch__btn.is-active::before { background: #fff; }
/* 语义色 → --sw-color */
.status-switch__btn--default { --sw-color: var(--text-3); }
.status-switch__btn--primary { --sw-color: var(--primary); }
.status-switch__btn--info { --sw-color: var(--primary); }
.status-switch__btn--success { --sw-color: var(--success); }
.status-switch__btn--warning { --sw-color: var(--warning); }
.status-switch__btn--danger { --sw-color: var(--danger); }
.status-switch__select { display: none !important; }
/* 锁定态 */
.status-switch.is-locked .status-switch__btn { cursor: not-allowed; opacity: .6; }
.status-switch.is-locked .status-switch__btn:hover { border-color: var(--border-2); color: var(--text-2); }
.status-switch__lock { font-size: 12px; color: var(--warning); white-space: nowrap; }
/* 多选按钮组（与单选 .radio-group 同一视觉语言，方形标记） */
.form-page .check-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }.form-page .check-item {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 4px; cursor: pointer;
font-size: 13px; border: 1px solid var(--border-1);
background: var(--bg-1); transition: all .15s; user-select: none;
}
.form-page .check-item:hover { border-color: var(--primary); }
.form-page .check-item input[type="checkbox"] { display: none; }
.form-page .check-item::before {
content: ''; width: 13px; height: 13px; border-radius: 3px;
border: 1.5px solid var(--border-2, #ccc); background: var(--bg-1, #fff);
flex-shrink: 0; transition: all .15s; box-sizing: border-box;
}
.form-page .check-item.checked { background: var(--primary); color: #fff; border-color: var(--primary); }
.form-page .check-item.checked::before { background: #fff; border-color: #fff; }
/* 预计/实际标签徽章 */
.form-page .ratio-badge-wrap {
display: flex; align-items: flex-end; gap: 4px;
}
.form-page .ratio-badge-content {
flex: 1; min-width: 0; display: flex; flex-direction: column;
}
.form-page .ratio-badge {
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px; height: 32px;
padding: 0 8px; box-sizing: border-box;
border-radius: 3px; color: #fff; flex-shrink: 0; white-space: nowrap;
}
.form-page .ratio-badge-expected { background: #3b82f6; }
.form-page .ratio-badge-actual { background: #f59e0b; }
/* 区块新增按钮 */
.form-page .section-add-btn {
margin-left: auto; font-size: 12px; padding: 3px 10px;
border: 1px solid var(--primary); color: var(--primary);
background: transparent; border-radius: 4px; cursor: pointer;
display: inline-flex; align-items: center; gap: 4px;
}
.form-page .section-add-btn:hover { background: var(--primary); color: #fff; }
.form-page .section-add-btn svg { width: 14px; height: 14px; }
/* 同一标题栏内有多个操作按钮时: 仅第一个把整组推到右侧, 其余紧跟其后 */
.form-page .section-title .section-add-btn + .section-add-btn { margin-left: 0; }
/* 费用合计(按币种分组显示在标题中) */
.form-page .charge-total { font-size: 13px; color: var(--text-2); font-weight: 400; margin-left: 8px; }
/* ===== 变更记录(字段级前后值追溯) ===== */
.change-batch {
border: 1px solid var(--border-1); border-radius: var(--radius-lg);
margin-bottom: 12px; overflow: hidden; background: var(--bg-1);
}
.change-batch-head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 4px;
padding: 8px 12px; background: var(--bg-3);
border-bottom: 1px solid var(--border-1); font-size: 12px; color: var(--text-2);
}
.change-batch-head .change-batch-no { font-weight: 600; color: var(--text-1); }
.change-batch-head .change-batch-meta { color: var(--text-3); }
.change-batch .data-table-scroll { margin-bottom: 0; }
.change-batch .data-table th,
.change-batch .data-table td { padding: 6px 12px; font-size: 13px; }
.change-old { color: var(--text-3); text-decoration: line-through; word-break: break-all; }
.change-new { color: var(--success); font-weight: 600; word-break: break-all; }
/* 审计日志弹窗内的原始 JSON */
.audit-json {
margin: 0 0 12px; padding: 10px 12px; max-height: 260px; overflow: auto;
background: var(--bg-3); border: 1px solid var(--border-1); border-radius: var(--radius-md);
font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--text-1);
white-space: pre-wrap; word-break: break-all;
}
.text-muted { color: var(--text-3); }
/* 可重复表单区块(提货信息 / 报关信息 等共用同一套卡片样式) */
.form-page .pickup-section,
.form-page .repeat-section { border: 1px solid var(--border-1); border-radius: 6px; padding: 12px 16px 4px; margin-bottom: 10px; background: var(--bg-1); position: relative; }
.form-page .pickup-header,
.form-page .repeat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-1); }
.form-page .pickup-no,
.form-page .repeat-no { font-size: 13px; font-weight: 600; color: var(--text-2); }
.form-page .pickup-del-btn,
.form-page .repeat-del-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; color: var(--text-3); cursor: pointer; border-radius: 4px; transition: all .15s; }
.form-page .pickup-del-btn:hover,
.form-page .repeat-del-btn:hover { color: var(--danger); background: rgba(239,68,68,0.08); }
.form-page .pickup-del-btn svg,
.form-page .repeat-del-btn svg { width: 15px; height: 15px; }
/* 可重复卡片区块内部: 7 列网格布局(行间列宽对齐), 与订单创建/编辑页一致。
订单创建页用 .pickup-section/.repeat-section(其