:root {
--bg: #f5f5f7;
--panel: #ffffff;
--text: #1d1d1f;
--muted: #6e6e73;
--accent: #0071e3;
--accent-2: #0a84ff;
--line: #d2d2d7;
--soft-line: #e8e8ed;
--header: #fbfbfd;
--success-bg: #ecfdf3;
--success-text: #05603a;
}
* { box-sizing: border-box; }
html { word-break: keep-all; }
html { scroll-behavior: smooth; }
body {
margin: 0;
padding-bottom: 86px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
word-break: keep-all;
}
a { color: inherit; word-break: keep-all; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 20px 20px 56px; }
/* 大萤幕左右不要各留一大块空白（业务方 2026-07-28）：内容宽度改成「原来的固定值」与
「萤幕的 96%」取大者——萤幕越大内容越宽，表格的横向滑块也跟着变少。
- max() 保证**任何**宽度下都不会比改动前窄，只会一样或更宽，版面不会缩水
- 用百分比不用 vw：vw 把纵向滚动条也算进去，会让整页多出横向滚动
- 阶梯与断点原样保留，手机/平板/笔电该怎么排还是怎么排 */
@media (min-width: 1240px) { .wrap { max-width: max(1200px, 96%); } }
@media (min-width: 1400px) { .wrap { max-width: max(1360px, 96%); } }
@media (min-width: 1600px) { .wrap { max-width: max(1560px, 96%); } }
@media (min-width: 1920px) { .wrap { max-width: max(1860px, 96%); } }
.topbar {
display: flex; justify-content: space-between; align-items: center; gap: 18px;
position: sticky;
top: 10px;
z-index: 1000;
margin-bottom: 18px; padding: 12px 16px; background: rgba(255,255,255,.82);
border: 1px solid rgba(232,232,237,.9); border-radius: 16px;
backdrop-filter: saturate(180%) blur(24px);
-webkit-backdrop-filter: saturate(180%) blur(24px);
box-shadow: 0 12px 36px rgba(0,0,0,.08), 0 1px 1px rgba(255,255,255,.6) inset;
transform: translateZ(0);
overflow: visible;
}
.brand-block { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 260px; flex: 0 1 auto; }
.brand-logo {
width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto;
border-radius: 9px;
}
/* 标题被 flex 压缩时裁切省略，绝不溢出容器压到菜单上
（2026-07-15：新增在线人数胶囊后 1280 宽下标题曾溢出盖住「首页」）。
.brand 外还包着一层无 class 的 div 才是真正的 flex 子项，
其默认 min-width:auto 会拒绝收缩——必须一并放行 */
.brand-block > * { min-width: 0; }
.brand {
font-size: 16px; font-weight: 700; letter-spacing: 0; line-height: 1.15;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
justify-content: flex-end;
flex: 1 1 auto;
min-width: 0;
overflow: visible;
}
.nav-main {
display: flex;
gap: 4px;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
min-width: 0;
flex: 1 1 auto;
overflow-x: auto;
overflow-y: hidden;
padding: 18px 4px 6px 0;
margin-top: -18px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.nav-main::-webkit-scrollbar {
display: none;
}
.nav a {
text-decoration: none; background: rgba(255,255,255,.72); border: 1px solid rgba(210,210,215,.72);
padding: 6px 9px; border-radius: 10px; color: #2c2c2e;
white-space: nowrap; font-size: 14px;
flex: 0 0 auto;
transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.nav a:hover { background: rgba(255,255,255,.96); border-color: rgba(174,174,178,.72); }
.nav a.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
box-shadow: 0 6px 18px rgba(0,113,227,.22);
font-weight: 700;
}
.nav a.active:hover { background: #0077ed; }
.nav-account {
display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; justify-content: flex-end;
padding-left: 10px; margin-left: 2px; border-left: 1px solid rgba(232,232,237,.9);
flex: 0 0 auto;
min-width: 0;
}
.account-pill { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
/* 右上角在线人数（业务方 2026-07-15）：绿=活跃，悬停显示在线者姓名。
双类选择器压过后面声明的 .pill 基础灰底 */
.pill.online-pill { background: var(--green-soft, #dcfce7); color: var(--green, #15803d); white-space: nowrap; cursor: default; }
.nav-jump { display: flex; align-items: center; flex: 0 0 auto; }
.nav-jump-input {
height: 30px; width: 148px; border: 1px solid rgba(174,174,178,.6);
border-radius: 8px 0 0 8px; padding: 0 10px; font-size: 13px; background: #fff;
}
.nav-jump-btn {
height: 30px; border: 1px solid rgba(174,174,178,.6); border-left: none;
border-radius: 0 8px 8px 0; background: #fff; padding: 0 11px; cursor: pointer;
font-size: 13px; line-height: 1;
}
/* 中等桌面宽度整体瘦身，让 1280 笔记本一行放得下全部导航（含完整标题）。
必须声明在上方 .nav a / .nav-jump-input 等基础规则之后，否则同特异性被基础规则覆盖 */
@media (max-width: 1440px) and (min-width: 641px) {
.brand { font-size: 14px; }
.nav { gap: 6px; }
.nav a { padding: 6px 6px; font-size: 13px; }
.nav-jump-input { width: 84px; }
.pill.online-pill { padding: 4px 8px; font-size: 12px; }
.account-pill { max-width: 120px; font-size: 12px; }
/* 语言切换基础规则声明在很后面(1820+行)，用双层选择器压过它 */
.nav .language-switch button { padding: 4px 8px; font-size: 12px; }
}
/* 中间宽度死区（业务方 2026-07-15：浏览器"不上不下"比例时导航叠在一起）——
瘦身后一行也要 ~1100px 内容宽，1240 以下放不下、640 以上又没触发手机布局。
这个区间让导航整体掉到 logo 下面一行并自由换行，元素永远不会互相压住。 */
@media (max-width: 1240px) and (min-width: 641px) {
.topbar { flex-wrap: wrap; }
.brand-block { max-width: none; }
.nav { width: 100%; flex-wrap: wrap; justify-content: flex-start; row-gap: 6px; }
.nav-main { flex-wrap: wrap; justify-content: flex-start; }
.nav-account {
flex-wrap: wrap; justify-content: flex-start; row-gap: 6px;
margin-left: 0; padding-left: 0; border-left: none;
}
}
html[lang="en"] .nav-main { gap: 7px; }
html[lang="en"] .nav a { padding: 8px 9px; font-size: 14px; }
html[lang="en"] .brand { font-size: 15px; line-height: 1.2; }
/* Dropdown nav */
.nav-dropdown { position: relative; flex: 0 0 auto; }
.nav-dropdown-trigger {
display: inline-flex; align-items: center; gap: 3px;
text-decoration: none; background: rgba(255,255,255,.72); border: 1px solid rgba(210,210,215,.72);
padding: 6px 9px; border-radius: 10px; color: #2c2c2e;
white-space: nowrap; font-size: 14px; cursor: pointer;
transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.nav-dropdown-trigger::after { content: ' ▾'; font-size: 10px; opacity: .6; }
.nav-dropdown-trigger:hover { background: rgba(255,255,255,.96); border-color: rgba(174,174,178,.72); }
.nav-dropdown-trigger.active {
background: var(--accent); color: #fff; border-color: var(--accent);
box-shadow: 0 6px 18px rgba(0,113,227,.22); font-weight: 700;
}
.nav-dropdown-menu {
display: flex; flex-direction: column; gap: 2px;
position: absolute; top: calc(100% + 6px); right: 0;
background: #fff; border: 1px solid rgba(210,210,215,.9);
border-radius: 10px; padding: 5px; min-width: 110px;
box-shadow: 0 8px 28px rgba(0,0,0,.13); z-index: 300;
visibility: hidden; opacity: 0; pointer-events: none;
transition: opacity .15s ease, visibility .15s ease;
transition-delay: .18s;
}
.nav-dropdown-menu::before {
content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: 8px;
}
.nav-dropdown-menu a {
display: block; padding: 7px 12px; border-radius: 7px;
color: #2c2c2e; font-size: 14px; text-decoration: none; white-space: nowrap;
background: none; border: none; box-shadow: none;
}
.nav-dropdown-menu a:hover { background: #f0f4ff; }
.nav-dropdown-menu a.active { background: var(--accent); color: #fff; font-weight: 700; }
/* 下拉菜单内的角标改内联（绝对定位是给顶栏横排链接用的，在菜单里会飘到容器角上被裁掉） */
.nav-dropdown-menu .review-badge {
position: static;
display: inline-flex;
margin-left: 8px;
vertical-align: middle;
}
@media (hover: hover) {
.nav-dropdown:hover .nav-dropdown-menu {
visibility: visible; opacity: 1; pointer-events: auto;
transition-delay: 0s;
}
}
.nav-dropdown.open .nav-dropdown-menu {
visibility: visible; opacity: 1; pointer-events: auto;
transition-delay: 0s;
}
/* 手机版下拉菜单 portal 到 body 后强制可见（脱离 .nav-dropdown.open 选择器范围） */
.nav-dropdown-menu-mobile {
position: fixed !important;
left: auto !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
z-index: 2000;
}
.messages { margin: 0 0 18px; padding: 0; list-style: none; }
.messages li {
background: var(--success-bg); border: 1px solid #abefc6; color: var(--success-text); padding: 12px 14px; border-radius: 10px; margin-bottom: 10px;
}
.messages li.error {
background: #fff0f0; border-color: #fca5a5; color: #b91c1c;
}
.panel {
background: var(--panel); border: 1px solid var(--soft-line); border-radius: 14px; padding: 22px;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
overflow: visible;
}
.hero {
background: #fff;
color: var(--text); border: 1px solid var(--soft-line); border-radius: 18px; padding: 22px 24px;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.hero h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.12; letter-spacing: 0; }
.hero p { margin: 0; max-width: 820px; line-height: 1.65; color: var(--muted); }
.hero select option { color: var(--text); background: #fff; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 22px; }
@media (min-width: 1400px) { .grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (min-width: 1600px) { .grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.card { background: var(--panel); border: 1px solid var(--soft-line); border-radius: 8px; padding: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.label { color: var(--muted); font-size: 13px; }
.value { font-size: 30px; font-weight: 700; margin-top: 10px; color: var(--text); }
.section { margin-top: 28px; }
.section h2 { margin: 0 0 14px; font-size: 22px; }
table {
width: 100%; min-width: max-content; border-collapse: collapse; background: var(--panel);
border-radius: 8px; overflow: hidden; border: 1px solid var(--soft-line);
}
/* sticky 表头必须让 table 自身 overflow:visible——否则 table 的 overflow:hidden 会成为
sticky 的滚动容器，把表头「钉」在不滚动的 table 盒里，导致表头根本不固定（2026-07-10）。
圆角裁剪改由外层 .table-frame 负责。 */
.sticky-table { overflow: visible; border-radius: 0; border: none; }
/* .fix-table: fixed-width columns that truncate long text (add title attr for tooltip) */
.fix-table { table-layout: fixed; min-width: unset; }
th, td {
padding: 8px 10px; border-bottom: 1px solid var(--soft-line); text-align: left; vertical-align: top; font-size: 13px;
white-space: nowrap; word-break: keep-all; overflow-wrap: normal;
}
td { overflow: hidden; text-overflow: ellipsis; }
/* 窄列长文本：折 N 行省略，点一下展开全文、再点收起（业务方 2026-07-26：
一屏尽量多放资料，不要一直左右拖）。
用法：**加在 | 内层的 上，不要直接加在 | 上**——td 一旦变成
-webkit-box 就脱离表格单元格布局，整行反而被撑高（实测 45px→72px，2026-07-26）。
td 与 span 都给 max-width，列宽才收得住（表格是 auto 布局，宽度只是提示）。
列里有链接/按钮的不要加——点链接会顺手把行展开。 */
.cell-clamp {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; white-space: normal; word-break: break-all; cursor: pointer;
}
.cell-clamp.is-open { -webkit-line-clamp: unset; display: block; overflow: visible; }
/* 只折 1 行的变体：行高不翻倍，一屏能多放几行（业务方 2026-07-26） */
.cell-clamp-1 { -webkit-line-clamp: 1; }
.cell-clamp:hover { background: #f6f8ff; }
@media (min-width: 1400px) { th, td { padding: 10px 12px; font-size: 14px; } }
th { background: var(--header); color: #3a3a3c; font-size: 13px; font-weight: 600; overflow: visible; }
.sticky-table thead th {
position: sticky;
top: 0;
z-index: 5;
background: var(--header);
box-shadow: 0 2px 0 rgba(0,0,0,.06);
}
.table-scroll {
margin-top: 18px;
max-height: min(48vh, 520px);
overflow: auto;
border: 1px solid var(--soft-line);
border-radius: 10px;
background: var(--panel);
overscroll-behavior: auto;
}
.table-scroll table { border: 0; border-radius: 0; border-collapse: separate; border-spacing: 0; }
.table-scroll thead { position: sticky; top: 0; z-index: 6; }
.table-scroll th { top: 0; background: var(--header); }
.table-frame {
margin-top: 18px;
max-height: min(72vh, 960px);
/* 超宽表格横向滚动、超高纵向滚动（配合 sticky 表头）。
缺此声明时表格直接顶出页面，既无原生滚动条、滚动条代理也失效（2026-07-10）。 */
overflow: auto;
/* 圆角与边框移到滚动容器（原本在 table 上的 overflow:hidden 会破坏 sticky 表头）*/
border: 1px solid var(--soft-line);
border-radius: 8px;
position: relative;
}
/* 以下两项都只在手机生效：
1) 宽表格的「还能横滑」提示：JS(见文末)按 scrollWidth 判断是否需要。用 inset box-shadow
直接画在滚动容器自己的边框内侧——阴影贴的是「视口」不是「内容」，天然不随内容滚动。
桌面端本来就有真滚动条，不需要这个提示，所以限定在手机断点内（2026-07-15）。
2) 冻结表格「锚点列」（如计调号/姓名/项目），横滑时始终看得到是哪一行；
各模板在对应 th/td 上加 .sticky-col（业务方 2026-07-14：宽表格滑走了就不知道是哪行了）。
注意：该表的 必须带 sticky-table class，否则全局 table{overflow:hidden} 会
劫持 sticky 使其完全失效。 */
@media (max-width: 640px) {
.table-frame.has-x-more {
box-shadow: inset -14px 0 10px -10px rgba(0,0,0,.22);
}
.sticky-col {
position: sticky;
left: 0;
z-index: 3;
background: var(--panel);
box-shadow: 2px 0 4px rgba(0,0,0,.05);
}
thead .sticky-col, .sticky-table thead .sticky-col { z-index: 6; background: var(--header); }
}
/* 首页订单列表：随内容自动变高，**不出内部滚动条**（业务方 2026-07-09 要「全量显示」）。
原本写 max-height:7200px（约 200 行）当作「大到不会触发」的数字 —— 但订单已经 3000+ 笔，
这个数字被真实资料超过，内层滚动条冒出来，页面于是同时有内外两个滚动条。
业务方 2026-08-12：「当里面的表格有滚动条，外面也有滚动条，2 个滚动条要同时出现的
那个刹那，会卡住」—— 那是浏览器的滚动锁定：一次滚轮手势会黏在最先滚到的容器上，
滚到底也不会接力给外层，必须停下重滚。
而且框高 7188px、视窗只有 756px 时，表头黏的是「框顶」、框顶早滚出画面 ——
吸顶表头在超过 200 行之后其实已经失效。改成 none 就是 07-09 当初本来要的意思。 */
.order-list-frame {
max-height: none;
border: 1px solid var(--soft-line);
border-radius: 10px;
background: var(--panel);
overflow: auto;
overscroll-behavior: auto;
-webkit-overflow-scrolling: touch;
}
.order-grid {
display: grid;
align-items: stretch;
width: 100%;
min-width: 1180px;
}
.order-grid.sales-grid {
width: 2490px;
min-width: 2490px;
grid-template-columns: 40px 90px 100px 90px 110px 190px 100px 220px 130px 130px 90px 110px 110px 110px 110px 110px 110px 110px 110px 110px 110px 100px;
}
/* 销售/计调视图：无毛利/毛利率两列（仅财务与管理员可见） */
.order-grid.sales-grid.sales-grid-np,
.order-grid.basic-grid.basic-grid-np {
width: 2280px;
min-width: 2280px;
grid-template-columns: 40px 90px 100px 90px 110px 190px 100px 220px 130px 130px 90px 110px 110px 110px 110px 110px 110px 110px 110px 110px;
}
.order-grid.basic-grid {
width: 2490px;
min-width: 2490px;
grid-template-columns: 40px 90px 100px 90px 110px 190px 100px 220px 130px 130px 90px 110px 110px 110px 110px 110px 110px 110px 110px 110px 110px 100px;
}
.order-grid-header {
position: sticky;
/* 注意：sticky 只黏在最近的「滚动容器」里，而 .order-list-frame 有 overflow:auto
（横向滚动与冻结列要用），所以这个 top 是相对**表格框**、不是视窗。
框比萤幕高很多时框顶一滚就出画面，表头也跟着不见 —— 也就是说超过一两屏之后
吸顶其实就失效了。要真正做到「表头黏在视窗上」得把框改成不横向滚动，
那样会牺牲冻结列，未做（2026-08-12 评估）。 */
top: 0;
z-index: 8;
background: var(--header);
box-shadow: 0 1px 0 var(--soft-line);
font-weight: 700;
color: #3a3a3c;
}
.order-grid-body {
width: 100%;
min-width: 100%;
overflow: visible;
}
.order-grid-cell {
padding: 12px 14px;
border-bottom: 1px solid var(--soft-line);
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
min-height: 48px;
display: flex;
align-items: center;
}
.order-grid-cell a {
display: block;
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.order-grid-row:last-child .order-grid-cell { border-bottom: 0; }
.order-grid-header .order-grid-cell { flex-direction: column; align-items: flex-start; gap: 4px; }
.col-filter-select {
width: 100%;
font-size: 11px;
padding: 2px 4px;
border: 1px solid var(--line);
border-radius: 4px;
background: #fff;
color: var(--text);
cursor: pointer;
max-width: 120px;
}
.col-filter-active { background: #ebf5ff; }
.col-filter-active .col-filter-select { border-color: var(--accent); }
.data-grid {
display: grid;
align-items: stretch;
min-width: 980px;
grid-template-columns: minmax(220px, 1.4fr) 120px minmax(210px, 1fr) minmax(320px, 1.8fr) 100px 130px;
}
.data-grid-header {
position: sticky;
top: 0;
z-index: 8;
background: var(--header);
box-shadow: 0 1px 0 var(--soft-line);
font-weight: 700;
color: #3a3a3c;
}
.data-grid-body {
max-height: min(52vh, 560px);
overflow-y: auto;
overflow-x: clip;
overscroll-behavior: auto;
}
.data-grid-cell {
padding: 12px 14px;
border-bottom: 1px solid var(--soft-line);
min-height: 48px;
display: flex;
align-items: center;
white-space: nowrap;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
}
.data-grid-cell a { overflow: hidden; text-overflow: ellipsis; }
.data-grid-row:last-child .data-grid-cell { border-bottom: 0; }
tr:last-child td { border-bottom: 0; }
.pill {
display: inline-flex; align-items: center; justify-content: center; min-height: 30px;
padding: 4px 10px; border-radius: 999px; background: #f2f2f7; color: #3a3a3c;
font-size: 12px; line-height: 1; white-space: nowrap; vertical-align: middle;
}
.tab-bar { display: flex; gap: 6px; border-bottom: 2px solid var(--line); padding-bottom: 0; }
.tab-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; border-radius: 8px 8px 0 0; text-decoration: none;
color: var(--muted); font-size: 14px; font-weight: 500;
border: 1px solid transparent; border-bottom: none; margin-bottom: -2px;
background: transparent; transition: color .15s, background .15s;
}
.tab-btn:hover { color: var(--text); background: #f5f5f7; }
.tab-btn.active { color: var(--accent); background: #fff; border-color: var(--line); border-bottom-color: #fff; font-weight: 600; }
.tab-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.tab-btn.active .tab-count { background: #ff3b30; }
.tab-btn:not(.active) .tab-count { background: #ff3b30; }
.btn {
display: inline-block; text-decoration: none; border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer;
background: var(--accent); color: #fff; font-weight: 600;
white-space: nowrap; word-break: keep-all;
}
.btn:hover { background: #0077ed; }
/* 全站列表逐列筛选行（当前页即时过滤，业务方2026-07-05要求） */
.col-search-icon { font-size: 10px; opacity: 0.45; cursor: pointer; }
th:hover .col-search-icon { opacity: 0.9; }
.col-search-popup {
position: fixed; z-index: 8000;
background: var(--surface, #fff); border: 1px solid var(--line);
border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.13);
padding: 10px; display: flex; gap: 6px; align-items: center;
min-width: 220px; max-width: 320px;
}
.col-search-popup input[type="text"] {
flex: 1; padding: 7px 10px; border: 1px solid var(--line);
border-radius: 7px; font-size: 14px; font-family: inherit; outline: none;
background: var(--surface, #fff); color: var(--text);
}
.col-search-popup input[type="text"]:focus { border-color: var(--accent); }
.col-search-popup .btn-clear { padding: 7px 10px; border-radius: 7px; font-size: 13px; background: var(--soft-line, #f5f5f7); color: var(--text); border: none; cursor: pointer; }
.hf-opt-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; border-top: 1px solid var(--line); margin-top: 2px; padding-top: 4px; }
.hf-opt { font-size: 13px; padding: 5px 8px; border-radius: 6px; display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 7px; cursor: pointer; white-space: nowrap; }
.hf-opt input { margin: 0; flex: none; }
.hf-opt:hover { background: var(--soft-line, #f0f4ff); }
.hf-opt input { cursor: pointer; }
/* 2026-07-18 三修：废弃 JS 代理横条（fixed 定位跟不上布局变化——天书展开/加行后
灰条错位横在表格中间、盖住相邻按钮），改用「样式化原生滚动条」：webkit 一旦样式化
就常驻显示（Mac 悬浮隐藏失效），天然钉在容器底边内侧、零延迟零错位。 */
.table-frame::-webkit-scrollbar,
.order-list-frame::-webkit-scrollbar { width: 12px; height: 10px; }
.table-frame::-webkit-scrollbar-track,
.order-list-frame::-webkit-scrollbar-track { background: transparent; }
.table-frame::-webkit-scrollbar-corner,
.order-list-frame::-webkit-scrollbar-corner { background: transparent; }
.table-frame::-webkit-scrollbar-thumb,
.order-list-frame::-webkit-scrollbar-thumb {
background: rgba(90, 90, 95, 0.45); border-radius: 6px;
}
/* 天书：每日主行顶部粗分隔条，天与天一眼可分（业务方2026-07-05反馈） */
.plan-days-table > tbody > tr > td {
border-top: 3px solid #aac4ee !important;
padding-top: 9px !important;
}
.plan-days-table > tbody > tr:first-child > td { border-top: none !important; }
/* 全站按钮配色约定：蓝=主要操作；白描边=次要操作；红字=危险操作（删除/撤销）；纯灰=禁用不可点 */
.btn.secondary { background: #fff; color: var(--text); border: 1px solid var(--line); }
.btn.secondary:hover { background: #f5f5f7; }
.btn.danger { background: #fff; color: #c0392b; border: 1px solid #e5b9b4; }
.btn.danger:hover { background: #fdf3f2; }
/* neutral 为历史类名，视觉并入 secondary，避免与「灰=禁用」混淆 */
.btn.neutral { background: #fff; color: var(--text); border: 1px solid var(--line); }
.btn.neutral:hover { background: #f5f5f7; }
.btn.success { background: #34c759; color: #fff; border: 1px solid #34c759; }
.btn.success:hover { background: #2fb350; }
.btn:disabled,
.btn.is-disabled,
button:disabled:not(.review-state-button) {
background: #e5e5ea !important;
border-color: #e5e5ea !important;
color: #8e8e93 !important;
cursor: not-allowed;
box-shadow: none;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field label { display: block; margin-bottom: 6px; font-weight: 600; }
.field input, .field select, .field textarea,
.filter-input, .filter-select {
width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: #fff;
font: inherit; color: var(--text); height: 38px; box-sizing: border-box;
}
.field input[type="checkbox"] {
width: auto; border: none; padding: 0; background: none; border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus,
.filter-input:focus, .filter-select:focus {
outline: 3px solid rgba(0,113,227,.18);
border-color: var(--accent);
}
.order-detail-panel { padding: 18px 20px; }
.order-detail-header { justify-content: space-between; align-items: flex-start; gap: 14px; }
.order-detail-title { margin: 0 0 8px; line-height: 1.15; }
.order-detail-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px 8px;
color: var(--muted);
font-size: 14px;
line-height: 1.35;
}
.order-status-pill {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 3px 9px;
border-radius: 999px;
background: #f2f2f7;
color: #3a3a3c;
font-size: 12px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.order-status-incomplete,
.order-status-draft {
background: #f2f2f7;
color: #3a3a3c;
}
.order-status-confirmed,
.order-status-closed {
background: rgba(52, 199, 89, .14);
color: #1d7f37;
}
.order-status-in_service {
background: #f2f2f7;
color: #3a3a3c;
}
.order-status-cancelled {
background: rgba(255, 59, 48, .12);
color: #b42318;
}
.order-detail-actions { gap: 8px; margin-top: 0; }
.order-detail-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-top: 8px;
}
.order-detail-summary .card {
padding: 8px 10px;
border-radius: 8px;
min-height: 0;
}
.order-detail-summary .value {
margin-top: 2px;
font-size: 14px;
line-height: 1.3;
}
.order-detail-compact-grid {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 5px 6px;
margin-top: 6px;
}
.order-detail-compact-item {
flex: 0 0 auto;
min-width: 0;
max-width: 176px;
min-height: 28px;
display: flex;
align-items: center;
gap: 5px;
padding: 3px 7px;
border: 1px solid var(--soft-line);
border-radius: 6px;
background: #fff;
}
.order-detail-compact-item .label {
flex: 0 0 auto;
min-width: 0;
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.2;
white-space: nowrap;
}
.order-detail-compact-item .info-value {
min-width: 0;
max-width: 112px;
}
/* 接待日期等区间型值需要更宽（如 06-29 ~ 07-01（3天）） */
.order-detail-compact-item .info-value-wide {
max-width: 210px;
color: var(--text);
font-size: 15px;
font-weight: 700;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inline-basic-summary .summary-edit,
.inline-basic-summary .summary-edit-only {
display: none;
}
.inline-basic-summary.is-editing .summary-read {
display: none;
}
.inline-basic-summary.is-editing .summary-edit,
.inline-basic-summary.is-editing .summary-edit-only {
display: flex;
align-items: center;
min-width: 0;
}
.inline-basic-summary .compact-pair {
gap: 4px;
}
.inline-basic-summary .compact-pax-pair {
display: grid;
grid-template-columns: auto 104px auto 104px;
align-items: center;
gap: 3px 5px;
}
.inline-basic-summary .compact-pair-label {
color: var(--muted);
font-size: 12px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.inline-basic-summary .order-detail-compact-item input,
.inline-basic-summary .order-detail-compact-item select {
width: 100%;
min-width: 0;
height: 24px;
min-height: 24px;
padding: 2px 5px;
border: 1px solid var(--line);
border-radius: 5px;
font: inherit;
font-size: 14px;
font-weight: 700;
}
.inline-basic-summary .order-detail-compact-item .compact-pair input {
width: 104px;
}
.order-detail-compact-item.order-pax-item {
max-width: none;
min-width: 410px;
}
.inline-basic-actions {
margin-top: 6px;
}
.inline-basic-actions .btn {
min-height: 30px;
padding: 5px 10px;
border-radius: 9px;
}
.inline-basic-summary:not(.is-editing) .summary-edit-only {
display: none;
}
.order-detail-compact-item.summary-edit-only,
.order-note-compact.summary-edit-only {
display: none;
}
/* Two-grid toggle: read-only-grid shown at rest, edit-only-grid shown when editing */
.inline-basic-summary .edit-only-grid { display: none; }
.inline-basic-summary.is-editing .read-only-grid { display: none; }
.inline-basic-summary.is-editing .edit-only-grid {
display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 6px;
}
/* edit-only-grid items use explicit per-field width; remove the global 176px cap */
.inline-basic-summary .edit-only-grid .order-detail-compact-item { max-width: none; }
.inline-basic-summary .order-detail-compact-item textarea {
width: 100%; padding: 2px 5px;
border: 1px solid var(--line); border-radius: 5px;
font: inherit; font-size: 14px; font-weight: 700;
resize: vertical; min-height: 48px;
}
.order-detail-section-title {
margin: 12px 0 8px;
font-size: 18px;
line-height: 1.25;
}
.order-detail-basic-grid {
display: grid;
grid-template-columns: repeat(4, minmax(110px, 1fr));
gap: 5px;
margin-top: 0;
}
.order-detail-info-item {
min-width: 0;
padding: 5px 8px;
border: 1px solid var(--soft-line);
border-radius: 7px;
background: #fff;
}
.order-detail-info-item .label {
margin-bottom: 2px;
font-size: 12px;
}
.order-detail-info-item .info-value {
min-height: 18px;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
white-space: normal;
word-break: break-word;
}
.order-detail-note {
grid-column: 1 / -1;
}
.order-detail-note .info-value {
max-height: 54px;
overflow: auto;
font-weight: 500;
}
.order-note-card {
margin-top: 8px;
}
.order-note-compact {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
align-items: start;
gap: 8px;
margin-top: 4px;
padding: 4px 8px;
border: 1px solid var(--soft-line);
border-radius: 8px;
background: #fff;
font-size: 15px;
line-height: 1.3;
}
.order-note-compact .label {
color: var(--muted);
font-size: 13px;
font-weight: 800;
white-space: nowrap;
}
.order-note-compact .info-value {
max-height: 38px;
overflow: auto;
color: var(--text);
font-weight: 600;
word-break: break-word;
}
.inline-edit-toggle {
margin-top: 10px;
border: 1px solid var(--soft-line);
border-radius: 10px;
background: #fff;
}
.inline-edit-toggle > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 10px;
cursor: pointer;
font-weight: 800;
list-style: none;
}
.inline-edit-toggle > summary::-webkit-details-marker { display: none; }
.inline-edit-toggle > summary::after {
content: '展开';
flex: 0 0 auto;
padding: 4px 9px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--muted);
font-size: 12px;
background: #f5f5f7;
}
.inline-edit-toggle[open] > summary::after { content: '收起'; }
.inline-edit-toggle form {
padding: 0 8px 8px;
border-top: 1px solid var(--soft-line);
}
.order-inline-form-grid {
grid-template-columns: repeat(5, minmax(112px, 1fr));
gap: 5px 7px;
margin-top: 8px;
}
.order-inline-form-grid .field-wide {
grid-column: 1 / -1;
}
.order-inline-form-grid .field label {
margin-bottom: 3px;
font-size: 12px;
}
.order-inline-form-grid .field input,
.order-inline-form-grid .field select,
.order-inline-form-grid .field textarea {
min-height: 30px;
padding: 5px 8px;
border-radius: 7px;
}
.inline-edit-actions { margin-top: 10px; }
.detail-section-head {
margin-top: 26px;
}
.detail-section-head h2 {
margin: 0;
font-size: 22px;
line-height: 1.25;
}
.section-actions {
margin-top: 10px;
}
.section-status-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px 10px;
margin-top: 8px;
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.section-status-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 4px 9px;
border-radius: 999px;
background: #f2f2f7;
color: #3a3a3c;
font-size: 12px;
font-weight: 800;
white-space: nowrap;
}
.section-status-chip.is-current {
background: #f2f2f7;
color: #3a3a3c;
}
.section-status-chip.is-progress {
background: #f2f2f7;
color: #3a3a3c;
}
.section-status-chip.is-warning {
background: #f2f2f7;
color: #3a3a3c;
}
.section-status-chip.is-done {
background: rgba(52, 199, 89, .14);
color: #1d7f37;
}
.section-status-chip.is-locked {
background: #e5e5ea;
color: #3a3a3c;
}
.section-status-meta {
min-width: 0;
color: var(--muted);
}
.section-flow {
display: flex;
align-items: center;
gap: 4px;
margin-top: 6px;
padding: 4px;
border: 1px solid var(--soft-line);
border-radius: 10px;
background: #fbfbfd;
overflow-x: auto;
scrollbar-width: thin;
}
.section-flow-step {
display: inline-flex;
align-items: center;
gap: 5px;
min-width: max-content;
padding: 5px 10px;
border-radius: 999px;
background: #f2f2f7;
color: var(--muted);
font-size: 13px;
font-weight: 800;
line-height: 1.1;
white-space: nowrap;
}
.section-flow-step::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #c7c7cc;
flex: 0 0 auto;
}
.section-flow-step.is-done {
background: rgba(52, 199, 89, .12);
color: #1d7f37;
}
.section-flow-step.is-done::before {
background: #34c759;
}
.section-flow-step.is-current {
background: #f2f2f7;
color: #3a3a3c;
}
.section-flow-step.is-current::before {
background: #c7c7cc;
}
.section-flow-step.is-locked {
background: #e5e5ea;
color: #1d1d1f;
}
.section-flow-step.is-locked::before {
background: #636366;
}
.workflow-strip {
margin-top: 10px;
padding: 8px 10px 7px;
border: 1px solid var(--soft-line);
border-radius: 10px;
background: linear-gradient(180deg, #fff, #fbfbfd);
overflow-x: auto;
overscroll-behavior-x: contain;
}
.workflow-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 5px;
}
.workflow-heading-title {
font-size: 14px;
font-weight: 800;
color: var(--text);
white-space: nowrap;
}
.workflow-current {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
color: var(--muted);
font-size: 12px;
white-space: nowrap;
}
.workflow-current strong { color: var(--text); }
.workflow-steps {
display: flex;
min-width: 760px;
align-items: flex-start;
}
.workflow-group + .workflow-group {
margin-top: 5px;
padding-top: 5px;
border-top: 1px solid var(--soft-line);
}
.workflow-group-title {
margin-bottom: 4px;
color: var(--text);
font-size: 13px;
font-weight: 800;
white-space: nowrap;
}
.workflow-step {
position: relative;
flex: 1 1 0;
min-width: 88px;
padding: 0 6px 0 0;
}
.workflow-step::after {
content: '';
position: absolute;
left: 24px;
right: 0;
top: 10px;
height: 2px;
background: var(--soft-line);
z-index: 0;
}
.workflow-step:last-child::after { display: none; }
.workflow-marker {
position: relative;
z-index: 1;
width: 21px;
height: 21px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid var(--line);
background: #fff;
color: var(--muted);
font-size: 11px;
font-weight: 800;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.workflow-title {
margin-top: 3px;
font-size: 12px;
font-weight: 800;
line-height: 1.3;
color: var(--text);
white-space: normal;
}
.workflow-detail {
display: none;
}
.workflow-owner {
display: none;
}
.workflow-state {
display: inline-flex;
margin-top: 3px;
padding: 1px 6px;
border-radius: 999px;
background: #f2f2f7;
color: var(--muted);
font-size: 10px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.workflow-step.is-done::after { background: #34c759; }
.workflow-step.is-done .workflow-marker {
border-color: #34c759;
background: #34c759;
color: #fff;
}
.workflow-step.is-done .workflow-state {
background: rgba(52,199,89,.12);
color: #1d7f37;
}
.workflow-step.is-current .workflow-marker {
border-color: #c7c7cc;
background: #f2f2f7;
color: #6e6e73;
box-shadow: none;
}
.workflow-step.is-current .workflow-title { color: #6e6e73; }
.workflow-step.is-current .workflow-state {
background: #f2f2f7;
color: #6e6e73;
}
.dispatch-plan-toggle {
margin-top: 14px;
border: 1px solid var(--soft-line);
border-radius: 10px;
background: #fff;
}
.dispatch-plan-toggle > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
cursor: pointer;
font-size: 16px;
font-weight: 800;
list-style: none;
}
.dispatch-plan-toggle > summary::-webkit-details-marker {
display: none;
}
.dispatch-plan-toggle > summary::after {
content: '展开';
flex: 0 0 auto;
padding: 5px 10px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
background: #f5f5f7;
}
.dispatch-plan-toggle[open] {
background: #f5f7ff;
border-left: 3px solid var(--accent);
}
.dispatch-plan-toggle[open] > summary::after {
content: '收起';
}
.dispatch-plan-body {
padding: 12px 12px 16px;
border-top: 1px solid var(--soft-line);
}
.collection-record-toggle {
margin-top: 14px;
border: 1px solid var(--soft-line);
border-radius: 10px;
background: #fff;
}
.collection-record-toggle > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 38px;
padding: 8px 11px;
cursor: pointer;
font-size: 15px;
font-weight: 800;
list-style: none;
}
.collection-record-toggle > summary::-webkit-details-marker {
display: none;
}
.collection-record-toggle > summary::after {
content: '展开';
flex: 0 0 auto;
padding: 4px 9px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
background: #f5f5f7;
}
.collection-record-toggle[open] > summary::after {
content: '收起';
}
.collection-record-toggle > .actions,
.collection-record-toggle > .table-frame {
margin: 0 10px 10px;
}
.order-form-panel { padding: 18px 22px; }
.order-form-title {
margin: 0 0 18px;
line-height: 1.15;
}
.order-form-grid {
grid-template-columns: repeat(4, minmax(150px, 288px));
max-width: 1200px;
gap: 7px 9px;
justify-content: start;
align-items: end;
}
.order-form-grid .field { min-width: 0; }
.order-form-grid .field label {
margin-bottom: 3px;
font-size: 12px;
}
.order-form-grid .field input,
.order-form-grid .field select,
.order-form-grid .field textarea {
min-height: 34px;
padding: 6px 9px;
}
.order-form-grid .field-wide {
grid-column: 1 / -1;
max-width: 588px;
}
/* 备注：占满右边剩下的空位（业务方 2026-08-14 反馈 #21）。
用 span 2 而不是整行——整行会把同一列的抵达/离开日期挤走。
窄屏时栏数会降到 3 甚至 1，span 2 自己会收敛，不用另外写断点。 */
.order-form-grid .field-note-wide {
grid-column: span 2;
max-width: none;
}
.order-form-grid .field-note-wide textarea { width: 100%; }
.form-section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--soft-line);
}
.form-section-header h2 {
margin: 0 0 4px;
font-size: 18px;
line-height: 1.25;
}
.plan-form-grid {
margin: 4px 0 8px;
grid-template-columns: repeat(7, minmax(84px, 1fr));
gap: 2px 4px;
align-items: end;
}
.plan-form-grid .field {
gap: 1px;
}
.plan-form-grid label {
margin-bottom: 1px;
font-size: 13px;
line-height: 1.1;
}
.plan-form-grid .field-wide {
grid-column: span 1;
max-width: none;
}
.plan-form-grid input,
.plan-form-grid select,
.plan-form-grid textarea {
height: 22px;
min-height: 22px;
max-height: 22px;
padding: 1px 5px;
border-radius: 6px;
font-size: 14px;
line-height: 1.2;
}
.plan-form-grid textarea {
resize: horizontal;
overflow: auto;
max-height: none;
}
.plan-form-grid .plan-short-textarea,
.plan-form-table .plan-short-textarea {
min-height: 24px;
height: 24px;
line-height: 1.4;
resize: none;
overflow: hidden;
box-sizing: border-box;
}
/* 重要备注：大输入框 + 右下角拖拽调整大小（业务方 2026-07-08） */
.plan-form-grid .plan-important-note {
height: auto;
min-height: 96px;
max-height: none;
resize: vertical;
overflow: auto;
line-height: 1.5;
}
.plan-form-grid .field-important-note {
grid-column: 1 / -1;
}
.plan-form-table .plan-itinerary-textarea {
min-height: 22px;
height: 22px;
line-height: 1.4;
resize: vertical;
overflow: hidden;
box-sizing: border-box;
width: 100%;
white-space: pre-wrap;
word-break: break-word;
}
/* All daily-row text fields auto-grow to show full text + resizable (drag bottom-right) */
.plan-form-table .plan-resizable-input {
min-height: 22px;
height: 22px;
line-height: 1.4;
resize: vertical;
overflow: hidden;
box-sizing: border-box;
width: 100%;
padding: 1px 4px;
white-space: pre-wrap;
word-break: break-word;
}
.plan-form-table .plan-date-input {
font-size: 12px;
padding: 0 2px;
}
.plan-table-title {
margin: 8px 0 0;
font-size: 15px;
}
.plan-form-frame {
max-height: none;
overflow: visible;
}
.plan-form-frame.compact {
max-height: none;
}
.plan-form-table {
min-width: 900px;
table-layout: fixed;
}
.plan-daily-table th:nth-child(1), .plan-daily-table td:nth-child(1) { width: 96px; } /* 导游：缩窄（业务方 2026-07-18） */
.plan-daily-table th:nth-child(2), .plan-daily-table td:nth-child(2) { width: 84px; } /* 日期：与日期长度等宽 */
.plan-daily-table th:nth-child(3), .plan-daily-table td:nth-child(3) { width: 34px; } /* 星期：够显示即可 */
.plan-daily-table th:nth-child(4), .plan-daily-table td:nth-child(4) { width: 78px; } /* 城市 */
.plan-daily-table th:nth-child(5), .plan-daily-table td:nth-child(5) { width: 50px; } /* 航班/车次：缩一半 */
.plan-daily-table th:nth-child(6), .plan-daily-table td:nth-child(6) { width: 276px; } /* 行程：吃下多出来的宽度 */
.plan-daily-table th:nth-child(7), .plan-daily-table td:nth-child(7),
.plan-daily-table th:nth-child(8), .plan-daily-table td:nth-child(8) { width: 47px; } /* 午餐/晚餐：缩三分之一 */
.plan-daily-table th:nth-child(9), .plan-daily-table td:nth-child(9) { width: 92px; } /* 酒店 */
.plan-daily-table th:nth-child(10), .plan-daily-table td:nth-child(10) { width: 38px; } /* 删除 */
/* 变更记录表 4 列：日期/描述/状态/删除（业务方 2026-07-19）。table-layout:fixed 下
未设宽的「描述」列吃掉剩余空间→撑满整行；状态列给足宽度不截断、可换行；删除列窄。 */
.plan-change-table { min-width: 480px; width: 100%; }
.plan-change-table th:nth-child(1), .plan-change-table td:nth-child(1) { width: 118px; } /* 日期 */
.plan-change-table th:nth-child(3), .plan-change-table td:nth-child(3) { width: 170px; white-space: normal; } /* 状态 */
.plan-change-table th:nth-child(4), .plan-change-table td:nth-child(4) { width: 54px; text-align: center; } /* 删除 */
.plan-reservation-table { min-width: 760px; }
.plan-reservation-table th:nth-child(1), .plan-reservation-table td:nth-child(1) { width: 104px; }
.plan-reservation-table th:nth-child(2), .plan-reservation-table td:nth-child(2) { width: 108px; }
.plan-reservation-table th:nth-child(3), .plan-reservation-table td:nth-child(3) { width: 180px; }
.plan-reservation-table th:nth-child(4), .plan-reservation-table td:nth-child(4),
.plan-reservation-table th:nth-child(5), .plan-reservation-table td:nth-child(5),
.plan-reservation-table th:nth-child(6), .plan-reservation-table td:nth-child(6) { width: 70px; }
.plan-reservation-table th:nth-child(7), .plan-reservation-table td:nth-child(7) { width: 104px; }
.plan-reservation-table th:nth-child(8), .plan-reservation-table td:nth-child(8) { width: 38px; }
.plan-form-table th,
.plan-form-table td {
height: 22px;
padding: 1px 3px;
vertical-align: middle;
}
.plan-form-table input,
.plan-form-table textarea {
width: 100%;
min-width: 0;
border: 1px solid var(--line);
border-radius: 3px;
padding: 0 4px;
font: inherit;
height: 20px;
min-height: 20px;
line-height: 20px;
}
.plan-form-table input[list] {
min-width: 0;
}
.plan-form-table textarea {
height: 20px;
min-height: 20px;
resize: none;
overflow: hidden;
}
.plan-form-table input[type="checkbox"] {
width: 16px;
height: 16px;
min-height: 0;
}
.plan-extra-notes-source {
display: none;
}
.plan-day-extra-row td {
padding-top: 0;
padding-bottom: 4px;
border-top: 0;
background: #f5f6fa;
}
.plan-day-extra-row > td:first-child {
border-left: 3px solid var(--accent);
}
.plan-sub-indent {
width: 32px;
min-width: 32px;
max-width: 32px;
}
.plan-day-extra-list {
display: flex;
flex-direction: column;
gap: 2px;
max-width: 520px;
}
.plan-day-extra-pair {
display: grid;
grid-template-columns: minmax(120px, 1fr) minmax(140px, 1fr) auto;
align-items: center;
gap: 3px;
}
.plan-day-extra-pair input {
width: 100%;
min-height: 21px;
padding: 1px 4px;
border: 1px solid var(--line);
border-radius: 3px;
font: inherit;
}
.plan-day-extra-add {
margin-top: 3px;
min-height: 22px;
padding: 1px 8px;
border-radius: 6px;
}
.inline-row-delete {
min-height: 22px;
padding: 1px 8px;
border-radius: 6px;
font-size: 12px;
line-height: 1.2;
}
.plan-guest-field {
margin-top: 10px;
max-width: none;
}
.plan-guest-field textarea {
width: 100%;
min-height: 78px;
resize: vertical;
}
.plan-guest-source {
display: none;
}
.plan-guest-table {
min-width: 860px;
table-layout: auto;
}
.plan-guest-table th:nth-child(1), .plan-guest-table td:nth-child(1) { width: 44px; }
.plan-guest-table th:nth-child(2), .plan-guest-table td:nth-child(2) { min-width: 140px; }
.plan-guest-table th:nth-child(3), .plan-guest-table td:nth-child(3) { width: 54px; }
.plan-guest-table th:nth-child(4), .plan-guest-table td:nth-child(4) { width: 80px; }
.plan-guest-table td:nth-child(4) .guest-resize-cell { width: 72px; min-width: 0; }
.plan-guest-table th:nth-child(5), .plan-guest-table td:nth-child(5) { width: 112px; }
.plan-guest-table th:nth-child(6), .plan-guest-table td:nth-child(6) { width: 126px; }
.plan-guest-table th:nth-child(7), .plan-guest-table td:nth-child(7) { width: 116px; }
.plan-guest-table th:nth-child(8), .plan-guest-table td:nth-child(8) { width: 86px; }
/* Resizable wrapper for 姓名 and 国籍 */
.guest-resize-cell { display: inline-block; resize: horizontal; overflow: hidden; box-sizing: border-box; min-width: 60px; width: 100%; }
.guest-resize-cell input { width: 100%; box-sizing: border-box; display: block; }
.plan-guest-display {
margin-top: 10px;
padding: 12px 14px;
min-height: 54px;
border: 1px solid var(--soft-line);
border-radius: 10px;
background: var(--panel);
line-height: 1.65;
white-space: normal;
}
.formset-add-btn {
margin-top: 7px;
min-height: 30px;
padding: 5px 11px;
border-radius: 9px;
}
.inline-entry-row input,
.billing-line-row.editing input,
.cost-item-row.editing input {
width: 100%;
min-width: 0;
border: 1px solid var(--line);
border-radius: 7px;
padding: 5px 8px;
font: inherit;
line-height: 1.25;
min-height: 32px;
vertical-align: middle;
}
.inline-entry-row .btn {
min-height: 0;
height: 32px;
padding: 5px 12px;
border-radius: 8px;
line-height: 1.25;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
.billing-lines-frame {
width: 100%;
max-width: 100%;
overflow-x: auto;
}
.cost-items-frame {
width: 100%;
max-width: 100%;
overflow-x: auto;
}
.billing-lines-table {
width: 100%;
min-width: 1080px;
table-layout: fixed;
}
.cost-items-table {
width: 100%;
min-width: 2300px;
table-layout: fixed;
}
.billing-lines-table th,
.billing-lines-table td,
.cost-items-table th,
.cost-items-table td {
height: 48px;
padding: 8px 10px;
vertical-align: middle;
}
.cost-items-table th,
.cost-items-table td {
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
}
.billing-lines-table th,
.billing-lines-table td,
.billing-lines-table .amount-cell,
.billing-lines-table .number-cell {
text-align: left;
}
.billing-lines-table .inline-entry-row input,
.billing-lines-table .billing-line-row.editing input,
.cost-items-table .inline-entry-row input,
.cost-items-table .cost-item-row.editing input,
.cost-items-table .inline-entry-row select,
.cost-items-table .cost-item-row.editing select {
width: 100%;
display: block;
}
.cost-items-table .inline-entry-row select,
.cost-items-table .cost-item-row.editing select {
margin-bottom: 6px;
}
.billing-lines-table .total-row .amount-cell {
text-align: left;
}
.billing-lines-table .billing-summary-label {
text-align: right;
color: var(--muted);
font-weight: 700;
}
.billing-lines-table .billing-summary-amount {
font-size: 18px;
font-weight: 800;
color: var(--text);
text-align: left;
}
.billing-summary-inline {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 28px;
width: 100%;
color: var(--muted);
font-weight: 800;
white-space: nowrap;
}
.billing-summary-inline strong {
margin-left: 6px;
font-size: 20px;
color: var(--text);
}
.billing-lines-table .billing-uncollected {
color: #d92d20;
}
.billing-summary-inline .billing-uncollected,
.billing-summary-inline .billing-uncollected strong {
color: #d92d20;
}
.inline-check {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.inline-check input { width: auto; min-width: 0; }
.total-row td {
background: var(--header);
font-weight: 700;
}
.nav-review-link {
position: relative;
overflow: visible;
}
.topbar,
.nav-main,
.nav-account {
overflow: visible;
}
.review-badge {
position: absolute;
top: -11px;
right: -7px;
min-width: 20px;
height: 19px;
padding: 0 6px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ff3b30;
color: #fff;
font-size: 12px;
font-weight: 800;
line-height: 1;
border: 2px solid #fff;
box-shadow: 0 8px 18px rgba(255, 59, 48, .34);
z-index: 1200;
pointer-events: none;
}
.review-alert-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 999px;
color: #fff;
background: #ff3b30;
font-weight: 800;
box-shadow: 0 10px 22px rgba(255, 59, 48, .24);
white-space: nowrap;
text-decoration: none;
z-index: 5000;
}
.review-page-alert {
margin-top: 18px;
padding: 14px 16px;
border-radius: 14px;
background: rgba(255, 59, 48, .1);
border: 1px solid rgba(255, 59, 48, .26);
color: #b42318;
font-weight: 800;
}
.review-action-group {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.review-state-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 7px 12px;
border-radius: 10px;
border: 1px solid var(--line);
background: #f5f5f7;
color: var(--muted);
font-weight: 800;
line-height: 1;
}
.review-state-button:disabled {
opacity: 1;
cursor: default;
}
.review-modal {
position: fixed;
inset: 0;
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(29, 29, 31, .34);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.review-modal[hidden] {
display: none;
}
.review-modal-card {
width: min(520px, 100%);
border: 1px solid rgba(232,232,237,.96);
border-radius: 18px;
background: rgba(255,255,255,.96);
box-shadow: 0 24px 70px rgba(0,0,0,.2);
padding: 20px;
}
.review-modal-card h3 {
margin: 0 0 8px;
font-size: 22px;
line-height: 1.25;
}
.review-modal-meta {
margin: 10px 0 0;
color: var(--muted);
line-height: 1.6;
}
.review-modal-warning {
margin-top: 14px;
padding: 12px;
border-radius: 12px;
background: rgba(142, 142, 147, .12);
border: 1px solid rgba(142, 142, 147, .28);
color: #3a3a3c;
font-weight: 700;
line-height: 1.5;
}
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.actions a, .actions button { white-space: nowrap; }
.muted { color: var(--muted); }
.filter-form { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; margin-top: 16px; }
.filter-control { min-width: 0; }
.filter-control.wide { min-width: 0; }
/* date inputs must override iOS native min-width */
.filter-form input[type="date"] {
-webkit-appearance: none;
appearance: none;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
.filter-actions { grid-column: 5 / 7; display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.hero .filter-form { align-items: flex-end; }
@media (max-width: 860px) {
.filter-form { grid-template-columns: repeat(3, 1fr); }
.filter-actions { grid-column: 2 / 4; }
}
@media (max-width: 560px) {
.filter-form { grid-template-columns: repeat(2, 1fr); }
.filter-actions { grid-column: 1 / 3; }
.filter-actions .btn { flex: 1; text-align: center; }
}
/* ── 通用筛选栏（新式）── */
.order-filter-bar {
background: var(--panel); border: 1px solid var(--soft-line);
border-radius: 8px; padding: 12px 14px 8px; margin-bottom: 12px;
}
.filter-primary-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.filter-group { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
.filter-group-label { font-size: 12px; color: var(--muted); white-space: nowrap; margin-right: 2px; }
.filter-compact-select {
height: 30px; font-size: 13px; padding: 0 6px;
border: 1px solid var(--soft-line); border-radius: 6px;
background: #fff; color: var(--text); cursor: pointer;
}
.filter-compact-select:focus { outline: none; border-color: var(--accent); }
.filter-date-input {
height: 30px; font-size: 13px; padding: 0 6px;
border: 1px solid var(--soft-line); border-radius: 6px;
background: #fff; color: var(--text); width: 130px;
}
.filter-date-input:focus { outline: none; border-color: var(--accent); }
.filter-dash { color: var(--muted); font-size: 13px; }
.filter-quick-btn {
height: 28px; padding: 0 9px; font-size: 12px;
border: 1px solid var(--soft-line); border-radius: 6px;
background: #fff; color: var(--text); cursor: pointer; white-space: nowrap;
transition: background .12s, color .12s;
}
.filter-quick-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.filter-quick-btn-active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.filter-search-group { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 240px; }
.filter-keyword-input {
flex: 1; height: 30px; padding: 0 10px; font-size: 13px;
border: 1px solid var(--soft-line); border-radius: 6px;
background: #fff; color: var(--text); min-width: 160px;
}
.filter-keyword-input:focus { outline: none; border-color: var(--accent); }
.filter-more-details { margin-top: 8px; }
.filter-more-details summary { list-style: none; }
.filter-more-details summary::-webkit-details-marker { display: none; }
.filter-more-summary {
display: inline-block; font-size: 12px; color: var(--accent);
cursor: pointer; padding: 3px 0; user-select: none;
}
.filter-more-summary:hover { text-decoration: underline; }
.filter-secondary-row {
display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; align-items: center;
}
.active-filter-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; min-height: 0; }
.active-filter-tag {
display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
background: #e8f0fe; color: #1a47a0; border-radius: 4px;
padding: 2px 7px 2px 8px; white-space: nowrap;
}
.active-filter-tag .tag-x {
cursor: pointer; font-size: 13px; line-height: 1;
color: #5577cc; font-weight: 700; margin-left: 2px;
}
.active-filter-tag .tag-x:hover { color: #c00; }
.filter-tag-clear-all {
font-size: 12px; color: var(--muted); cursor: pointer;
padding: 2px 6px; border-radius: 4px; text-decoration: underline;
}
.filter-tag-clear-all:hover { color: #c00; }
.order-list-meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
/* ── 收款状态徽章 ── */
.collect-status {
display: inline-block; font-size: 12px; font-weight: 700;
padding: 1px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.6;
}
.collect-confirmed { background: rgba(52,199,89,.14); color: #1d7f37; }
.collect-pending { background: #f2f2f7; color: #6e6e73; }
/* 收款进度文字色（财务警示，仅此处用红/橙） */
.collect-amt-none { color: #d23b3b; font-weight: 700; }
.collect-amt-partial { color: #c8761a; font-weight: 700; }
.collect-amt-full { color: #1d7f37; font-weight: 700; }
.collect-amt-draft { color: #c8761a; font-weight: 600; }
/* 底部双 logo 悬浮条已移除（业务方 2026-07-18：遮挡操作区） */
.language-switch {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
background: #f2f2f7;
border: 1px solid var(--soft-line);
border-radius: 999px;
}
.language-switch button {
border: 0;
border-radius: 999px;
padding: 5px 9px;
background: transparent;
color: #3a3a3c;
font: inherit;
font-size: 12px;
cursor: pointer;
white-space: nowrap;
}
.language-switch button.active {
background: #fff;
color: var(--text);
box-shadow: 0 1px 3px rgba(0,0,0,.08);
font-weight: 700;
}
.confirm-modal[hidden] { display: none; }
.confirm-modal {
position: fixed;
inset: 0;
z-index: 100;
display: grid;
place-items: center;
padding: 20px;
background: rgba(0,0,0,.28);
backdrop-filter: blur(8px);
}
.confirm-dialog {
width: min(420px, 100%);
padding: 22px;
border-radius: 16px;
border: 1px solid var(--soft-line);
background: rgba(255,255,255,.96);
box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.confirm-dialog h3 { margin: 0 0 8px; font-size: 20px; }
.confirm-dialog p { margin: 0; color: var(--muted); line-height: 1.55; }
@media (max-width: 1280px) {
.order-form-grid {
grid-template-columns: repeat(3, minmax(180px, 320px));
max-width: none;
}
}
@media (max-width: 980px) {
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid { grid-template-columns: 1fr; }
.order-detail-header { display: block; }
.order-detail-actions { margin-top: 12px; }
.order-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order-detail-compact-item {
flex: 0 0 auto;
max-width: calc(50vw - 24px);
}
.order-detail-basic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order-detail-note { grid-column: 1 / -1; }
.workflow-heading { align-items: flex-start; flex-direction: column; }
.order-form-grid { grid-template-columns: 1fr; max-width: none; }
.order-form-grid .field-wide { max-width: none; }
.order-inline-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-form-grid .field-wide { grid-column: 1 / -1; }
/* 导航中间宽度布局统一由上方 641-1240px 断点处理，此处不再重复声明 */
}
@media (max-width: 640px) {
body { padding-bottom: 28px; }
.wrap {
padding: 8px 8px 36px;
}
.grid { grid-template-columns: 1fr; }
.panel {
padding: 14px;
border-radius: 14px;
min-width: 0;
}
/* 防止长字串（订单号/邮箱/长人名）撑破手机版面 */
.panel h1, .panel h2, .panel h3,
.order-detail-compact-item .info-value,
.order-detail-compact-item .label,
.section-status-row, .muted,
th, td, .order-grid-cell {
overflow-wrap: anywhere;
word-break: break-word;
}
.hero {
padding: 18px;
border-radius: 16px;
}
.order-detail-panel {
padding: 14px;
}
.panel h1 {
font-size: 24px;
line-height: 1.15;
}
.order-detail-title {
font-size: 28px;
}
.order-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order-detail-compact-item {
flex: 0 0 auto;
min-width: 0;
max-width: 100%;
min-height: 26px;
}
.order-detail-basic-grid { grid-template-columns: 1fr; }
.form-section-header { flex-direction: column; }
.order-inline-form-grid { grid-template-columns: 1fr; }
.plan-form-grid { grid-template-columns: 1fr; }
.topbar {
position: sticky;
top: 0;
flex-direction: column;
align-items: stretch;
gap: 4px;
margin-bottom: 10px;
padding: 6px 10px;
border-radius: 0;
border-left: none;
border-right: none;
border-top: none;
box-shadow: 0 1px 0 var(--soft-line), 0 4px 12px rgba(0,0,0,.06);
}
.brand-block {
max-width: none;
width: auto;
min-width: 0;
flex: 1 1 auto;
gap: 6px;
}
.brand {
font-size: 13px;
line-height: 1.2;
}
.brand-logo { width: 26px; height: 26px; border-radius: 6px; }
.nav {
width: 100%;
flex: 0 0 auto;
gap: 3px;
align-items: stretch;
flex-direction: column;
}
.nav-main {
width: 100%;
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 0;
}
.nav-main::-webkit-scrollbar {
display: none;
}
/* 账号区（搜索/语言/身份/退出）绝不能靠隐藏的横向滑动才够得着——
退出登录尤其是关键操作，改成允许换行，搜索框收窄让一行尽量放得下（业务方 2026-07-14） */
.nav-account {
width: 100%;
flex-wrap: wrap;
justify-content: flex-start;
row-gap: 6px;
overflow-x: visible;
}
.nav-jump-input { width: 96px; }
.account-pill { max-width: 42vw; }
.nav-account {
padding-top: 0;
border-top: 1px solid var(--soft-line);
padding-top: 4px;
}
.nav a {
flex: 0 0 auto;
padding: 5px 10px;
border-radius: 9px;
font-size: 13px;
}
.pill {
flex: 0 0 auto;
min-height: 28px;
padding: 4px 9px;
}
.language-switch {
flex: 0 0 auto;
}
.hero h1 { font-size: 28px; }
.actions {
gap: 8px;
}
.btn {
padding: 9px 12px;
border-radius: 10px;
}
.detail-section-head {
margin-top: 22px;
}
.detail-section-head h2 {
font-size: 20px;
}
.section-status-row {
align-items: flex-start;
gap: 6px 8px;
}
/* 宽表格在手机上可横向滑动 */
.table-frame,
.plan-form-frame,
.cost-table-frame {
-webkit-overflow-scrolling: touch;
max-height: 55vh;
}
/* 订单列表表格允许横划 */
.table-frame { max-height: none; overflow-x: auto; }
/* 天书表格不设 max-height 限制，让页面自然滚动。
2026-08-09：这条规则原本写的是 40vh，跟它自己这行注释、也跟桌面版
（.plan-form-frame { max-height: none; overflow: visible }）正好相反。
后果是天书表被塞进一个 40vh 的小窗口里自己滚：实测 14 天的天书内容高
5251px、窗口只有 274px，鼠标停在表上往下滚，滚的是这个小窗口、页面不动，
要滚五十来下才轮到页面动 —— 业务方「集中在天书编辑向下滑动就卡住不动，
会停顿数秒」。窗口不最大化或浏览器缩放调大时（CSS 宽度 ≤640px）就会踩到。 */
.plan-form-frame { max-height: none; }
/* .tab-bar 全站共用（13处）。它默认 flex-wrap:nowrap，页签多时手机上装不下就会把
整页撑出横向滚动条（如审核待办的 5 个页签）。改成允许换行即可解决。
为什么用换行而不是「页签条自身横向滑动」：overflow-x:auto 会把 overflow-y 从 visible
连带计算成 auto，把首页「新增/变更/取消」那种 position:absolute;top:-6px 的红角标裁掉；
而且横滑会把页签藏起来，业务方容易漏看。换行则全部页签一眼可见（2026-07-15 实测选定）。 */
.tab-bar {
flex-wrap: wrap;
row-gap: 2px;
}
/* |