/* pe_erp 员工端 — 视觉令牌（日/夜对等；规范见 docs/UI_APPLE_THEME.md） */
/* UI module ownership map: docs/UI_MODULE_PARTITIONS.md — edit within one UI-MODULE section when possible. */

/* ========== UI-MODULE: tokens ========== */
/* —— 字号档位（Typography Plan v1 · 方案 B）：整体缩放 rem 基准；body 标准档 = 0.9375rem = 15px —— */
html {
  font-size: 16px;      /* 标准档 */
}
html[data-fs="compact"] {
  font-size: 15px;      /* 紧凑档（≈ -6%） */
}
html[data-fs="large"] {
  font-size: 17px;      /* 大档（≈ +6%） */
}

:root {
  

/* —— 动效令牌（docs/MOTION_DESIGN.md §1；日夜同名，禁写死时长） —— */
  --dur-1: 120ms;   /* 微反馈：hover / 按下 / 焦点 */
  --dur-2: 200ms;   /* 小元素进出：徽章 / 高亮 / 进度条 */
  --dur-3: 400ms;   /* 卡片位移 / 列表重排（主力档，柔和） */
  --dur-4: 480ms;   /* 大区块：抽屉 / 面板 / 图表切换 */
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-decel: cubic-bezier(.16, 1, .3, 1);     /* 进入 / 位移（长尾） */
  --ease-accel: cubic-bezier(.3, 0, .8, .15);    /* 退出 */
  --dur-attention: 1.1s;  /* 强调脉冲周期（新卡描边等） */
  --stagger-1: 24ms;
  --stagger-2: 30ms;
  /* —— Surfaces（面） —— */
  --bg: #f5f5f7;
  --card: #ffffff;
  --surface-pearl: #fafafc;
  --surface-elevated: #ffffff;
  --surface-hover: #f0f0f5;
  /* —— Text（字） —— */
  --text: #1d1d1f;
  --muted: #6e6e73;
  --muted-soft: #86868b;
  --text-on-brand: #ffffff;
  /* —— Line（线） —— */
  --line: #d2d2d7;
  --line-soft: #e8e8ed;
  /* —— Apple 交互面（iOS tinted fill：靠底色分层，禁描边胶囊） —— */
  --fill-gray: rgba(120, 120, 128, 0.12);        /* 次级按钮/中性胶囊底 */
  --fill-gray-strong: rgba(120, 120, 128, 0.2);  /* 其 hover */
  --fill-white: rgba(255, 255, 255, 0.14);       /* 顶栏 chip 底（顶栏恒为深色） */
  --fill-white-strong: rgba(255, 255, 255, 0.24);
  --hairline: rgba(0, 0, 0, 0.07);               /* 卡片/表格发丝线（比 --line-soft 更轻） */
  --hairline-strong: rgba(0, 0, 0, 0.12);        /* 输入框等需要可见边界处 */
  /* —— Brand（唯一交互强调） —— */
  --brand: #0066cc;
  --brand-focus: #0071e3;
  --brand-on-dark: #2997ff;
  --brand-dark: #0055b0;
  --focus-ring: rgba(0, 113, 227, 0.22);
  /* —— Semantic（语义色 + 软底，日夜各一套） —— */
  --ok: #34c759;
  --ok-text: #1a7f37;
  --ok-soft: rgba(52, 199, 89, 0.16);
  --ok-soft-border: rgba(52, 199, 89, 0.35);
  --err: #ff3b30;
  --err-text: #c41e16;
  --err-soft: rgba(255, 59, 48, 0.12);
  --err-soft-border: rgba(255, 59, 48, 0.35);
  --warn: #ff9f0a;
  --warn-text: #9a6700;
  --warn-soft: rgba(255, 159, 10, 0.16);
  --warn-soft-border: rgba(255, 159, 10, 0.4);
  --info: #0066cc; /* 进行中/生产中（与 --info-soft 同基色） */
  --info-soft: rgba(0, 102, 204, 0.1);
  --info-soft-border: rgba(0, 102, 204, 0.28);
  /* —— Table / chip / state —— */
  --row-hover: rgba(0, 102, 204, 0.04);
  --row-selected: rgba(0, 102, 204, 0.08);
  --row-warn: rgba(255, 159, 10, 0.1);
  --row-partial: rgba(255, 159, 10, 0.12);
  --chip-bg: var(--surface-pearl);
  --chip-changed-bg: rgba(0, 102, 204, 0.12);
  --chip-changed-border: rgba(0, 102, 204, 0.32);
  /* —— Chrome —— */
  --header-bg: rgba(22, 22, 23, 0.82);
  --header-text: #f5f5f7;
  --overlay-scrim: rgba(10, 20, 40, 0.45);
  /* —— Shape / motion / type —— */
  --nav-h: 48px;
  --radius: var(--radius-lg);
  --radius-sm: 10px;   /* 苹果风控件圆角（输入框 / 图标按钮 / 小卡） */
  --radius-lg: 18px;
  --radius-pill: 9999px;
  --radius-line: 1px;
  /* 默认描边线宽；禁止 2px 堆层级 */
  /* --radius 已并入 lg，仅兼容别名；禁止当独立第四档用 */
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.12);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
    system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
    "Microsoft YaHei", system-ui, sans-serif;
  color-scheme: light;
}

/* 夜间：与日间同名令牌一一覆盖（组件只写 var，不写死浅色） */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0d;
  --card: #1c1c1e;
  --surface-pearl: #2c2c2e;
  --surface-elevated: #2c2c2e;
  --surface-hover: #3a3a3c;
  --text: #f5f5f7;
  --muted: #98989d;
  /* 略亮于旧 #6e6e73，避免夜间卡片上「浅色辅助字」几乎看不见 */
  --muted-soft: #8e8e93;
  --text-on-brand: #ffffff;
  --line: #3a3a3c;
  --line-soft: #2c2c2e;
  --fill-gray: rgba(120, 120, 128, 0.24);
  --fill-gray-strong: rgba(120, 120, 128, 0.36);
  --fill-white: rgba(255, 255, 255, 0.12);
  --fill-white-strong: rgba(255, 255, 255, 0.22);
  --hairline: rgba(255, 255, 255, 0.1);
  --hairline-strong: rgba(255, 255, 255, 0.18);
  --brand: #0a84ff;
  --brand-focus: #409cff;
  --brand-on-dark: #64b5ff;
  --brand-dark: #6eb5ff;
  --focus-ring: rgba(10, 132, 255, 0.28);
  --ok: #30d158;
  --ok-text: #30d158;
  --ok-soft: rgba(48, 209, 88, 0.16);
  --ok-soft-border: rgba(48, 209, 88, 0.35);
  --err: #ff453a;
  --err-text: #ff6961;
  --err-soft: rgba(255, 69, 58, 0.16);
  --err-soft-border: rgba(255, 69, 58, 0.4);
  --warn: #ffd60a;
  --warn-text: #ffd60a;
  --warn-soft: rgba(255, 214, 10, 0.16);
  --warn-soft-border: rgba(255, 214, 10, 0.4);
  --info: #0a84ff; /* 进行中/生产中（暗色） */
  --info-soft: rgba(10, 132, 255, 0.16);
  --info-soft-border: rgba(10, 132, 255, 0.35);
  --row-hover: rgba(10, 132, 255, 0.1);
  --row-selected: rgba(10, 132, 255, 0.14);
  --row-warn: rgba(255, 159, 10, 0.14);
  --row-partial: rgba(255, 214, 10, 0.1);
  --chip-bg: var(--surface-pearl);
  --chip-changed-bg: rgba(10, 132, 255, 0.18);
  --chip-changed-border: rgba(10, 132, 255, 0.4);
  --header-bg: rgba(22, 22, 23, 0.9);
  --header-text: #f5f5f7;
  --overlay-scrim: rgba(0, 0, 0, 0.55);
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 10px 32px rgba(0, 0, 0, 0.55);
}

*, *::before, *::after { box-sizing: border-box; }

:focus-visible {
  outline: 2px solid var(--brand-focus);
  outline-offset: 2px;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-gutter: stable;
}
body.app-body {
  margin: 0;
  min-height: 100vh;
  font-size: 0.9375rem;   /* 正文基准 = body 档（标准档 15px；档位随 root 缩放） */
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  letter-spacing: -0.011em;
  line-height: 1.47;
}
/* 侧栏/弹层锁滚时的额外标记；补偿宽度由 BodyScrollLock 写入 padding-right */
html.scroll-locked {
  overflow: hidden;
}
html.scroll-locked body.app-body {
  overflow: hidden;
}

/* ========== UI-MODULE: chrome ========== */
/* —— 顶栏（Apple global-nav：近黑 + 轻毛玻璃） —— */
.app-header {
  position: sticky;
  top: 0;
  z-index: 5000;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: var(--header-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  overflow: visible;
}
.app-header-inner {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(0.75rem, 1.2vw, 1.5rem);
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  overflow: visible;
}
body.layout-fluid .app-header-inner,
body.layout-fluid .app-main {
  max-width: none;
  width: 100%;
}
body.layout-fluid .app-header-inner {
  padding-left: clamp(0.75rem, 1.2vw, 1.5rem);
  padding-right: clamp(0.75rem, 1.2vw, 1.5rem);
}
body.layout-fluid .app-main {
  padding: 1rem clamp(0.85rem, 1.6vw, 1.75rem) 1.5rem;
}
body.layout-fluid .live-status {
  margin-bottom: 0.75rem;
}
.app-brand {
  color: #f5f5f7;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  letter-spacing: -0.02em;
  opacity: 0.92;
}
.app-brand:hover { color: var(--text-on-brand); opacity: 1; }
.app-brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  flex-shrink: 0;
}
.app-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.2rem;
  flex: 1;
  align-items: center;
}
.app-nav > a,
.app-nav .nav-dd-trigger {
  color: var(--header-text);
  text-decoration: none;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  line-height: 1.2;
  border: 0;
  background: transparent;
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: background var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
}
.app-nav > a:hover,
.app-nav > a.is-active,
.app-nav .nav-dd.is-active > .nav-dd-trigger,
.app-nav .nav-dd[open] > .nav-dd-trigger,
.app-nav .nav-dd:hover > .nav-dd-trigger {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-on-brand);
}
/* 顶栏导航强作用域（日夜双主题 header 均近黑）：保证浅色日间也可读 */
.app-header .app-nav > a,
.app-header .app-nav .nav-dd-trigger {
  color: var(--header-text);
}
.app-header .app-nav > a:hover,
.app-header .app-nav > a.is-active,
.app-header .app-nav .nav-dd.is-active > .nav-dd-trigger,
.app-header .app-nav .nav-dd[open] > .nav-dd-trigger,
.app-header .app-nav .nav-dd:hover > .nav-dd-trigger {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-on-brand);
}

/* 顶栏分组下拉 */
.app-nav .nav-dd {
  position: relative;
  display: inline-block;
}
.app-nav .nav-dd-trigger {
  list-style: none;
  user-select: none;
}
.app-nav .nav-dd-trigger::-webkit-details-marker { display: none; }
.app-nav .nav-dd-trigger::marker { content: ""; }
.app-nav .nav-dd-trigger::after {
  content: " ▾";
  font-size: 0.8125rem;
  opacity: 0.7;
}
.app-nav .nav-dd-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 6000;
  min-width: 11.5rem;
  /* 不用 margin-top 做视觉空隙：margin 不接收鼠标，慢移会穿出 hover 区导致菜单收起 */
  margin-top: 0;
  padding: 0.55rem 0.45rem 0.45rem;
  background: rgba(29, 29, 31, 0.96);
  background-clip: padding-box;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
/* 透明命中桥：覆盖触发器与面板之间的空隙，鼠标经过仍算在 .nav-dd 内 */
.app-nav .nav-dd-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.app-nav .nav-dd-panel a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--text-on-brand) 90%, transparent);
  text-decoration: none;
  font-size: 0.875rem;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-standard);
}
.app-nav .nav-dd-panel a:hover,
.app-nav .nav-dd-panel a.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-on-brand);
}
.app-user {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--text-on-brand) 72%, transparent);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
.app-user-name { color: color-mix(in srgb, var(--text-on-brand) 78%, transparent); }
.app-user a {
  color: var(--brand-on-dark);
  margin-left: 0;
  text-decoration: none;
}
.app-user a:hover { text-decoration: underline; }
.header-action-chip,
.app-user a.app-user-admin.header-action-chip,
button.header-action-chip {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--fill-white) !important;
  background-color: var(--fill-white) !important;
  background-image: none !important;
  color: var(--header-text, #f5f5f7) !important;
  /* 苹果风：顶栏控件无描边，靠半透明白底分层（旧版白描边过于“方框”） */
  border: 1px solid transparent !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  padding: 0.25rem 0.7rem;
  min-height: 1.75rem;
  line-height: 1.2;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  vertical-align: middle;
}
.header-chip-caret { opacity: 0.7; margin-left: 0.15em; }
.header-action-chip:hover,
.app-user a.app-user-admin.header-action-chip:hover,
button.header-action-chip:hover {
  background: var(--fill-white-strong);
  background-color: var(--fill-white-strong);
  color: var(--header-text, #f5f5f7);
  text-decoration: none;
}
.impersonate-dropdown.staff summary.impersonate-summary-reset {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: inherit;
}
.impersonate-dropdown.staff summary.impersonate-summary-reset::-webkit-details-marker { display: none; }
.impersonate-dropdown.staff summary.impersonate-summary-reset::marker { content: ""; }

/* 日间 / 夜间切换（账户名左侧） */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0;
  padding: 0.28rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f5f5f7 !important;
  font-size: 0.8125rem;
  font-weight: 500 !important;
  line-height: 1.2;
  cursor: pointer;
  transform: none !important;
  letter-spacing: -0.01em;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: var(--text-on-brand) !important;
}
.theme-toggle-sun,
.theme-toggle-moon {
  font-size: unset;
  line-height: 0;
}
html[data-theme="light"] .theme-toggle-moon { display: none; }
html[data-theme="dark"] .theme-toggle-sun { display: none; }
.theme-toggle-text { opacity: 0.92; }

/* —— 统一图标（Lucide 扁平单色线条，见 docs/ICON_RULE.md） —— */
.pe-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: -0.125em;
  stroke: currentColor;
  fill: none;
}
.pe-icon--sm { width: 1rem; height: 1rem; }      /* 16 */
.pe-icon--md { width: 1.25rem; height: 1.25rem; } /* 20 */
.pe-icon--lg { width: 1.5rem; height: 1.5rem; }   /* 24 */
.theme-toggle .pe-icon { color: inherit; }
.theme-toggle-sun.pe-icon,
.theme-toggle-moon.pe-icon { font-size: unset; line-height: 0; }
.pe-notify-bell .pe-icon { color: inherit; }

/* —— 主区（默认全宽，与 PE 膜板块一致；随视口 padding 自适应） —— */
.app-main {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 0.65rem clamp(0.6rem, 1.2vw, 1.25rem) 1.25rem;
  box-sizing: border-box;
}
.app-main.wide { max-width: none; width: 100%; }
.app-main.fluid { max-width: none; width: 100%; }
/* 车间/扫码页：内容仍全宽，仅保留触控友好的内边距 */
.app-main.workshop {
  max-width: none;
  width: 100%;
  padding: 0.65rem clamp(0.6rem, 1.2vw, 1.25rem) 1.25rem;
}

h1.page-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin: 0 0 0.35rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--text);
}
.page-sub {
  color: var(--muted);
  font-size: 1rem;
  margin: 0 0 1.15rem;
  line-height: 1.45;
}
.page-sub a {
  color: var(--brand);
  text-decoration: none;
}
body:not(.show-help-text) .pe-help-hint { display: none !important; }
.page-sub a:hover { text-decoration: underline; }

/* —— 卡片 / 表单 / 表 —— */
/* 统一表面原语（UI 增补规范 §3）：所有卡片容器共享同一令牌配方 */
.surface,
.card, .app-modal, .live-card, .hub-card,
.notify-center-item, .nav-dd-panel, .impersonate-panel,
.impersonate-dropdown, .ms-panel {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}

.card {
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.1rem;
}
.card h2, .card h3 {
  margin: 0 0 0.65rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

label { display: inline-block; min-width: 5em; color: var(--text); }
input, select, textarea, button {
  font-family: inherit;
  font-size: 1rem;
}
input[type="text"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input:not([type]),
select,
textarea {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  transition: border-color var(--dur-1) var(--ease-standard), box-shadow var(--dur-1) var(--ease-standard);
  box-sizing: border-box;
}
/* 日期/时间控件：跟随主题，避免系统控件与令牌输入框两套脸 */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  min-height: 2.45rem;
  color-scheme: light;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.65;
  cursor: pointer;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
button, .btn,
.facet-btn, .live-now-btn, .live-sync-btn,
.impersonate-user-btn, .impersonate-stop-btn, .pe-notify-panel-btn {
  display: inline-block;
  padding: 0.55rem 1.15rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--text-on-brand);
  cursor: pointer;
  font-weight: 500;
  line-height: 1.25;
  transition: background var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
}
button:hover, .btn:hover {
  background: var(--brand-focus);
  color: var(--text-on-brand);
}
button:active, .btn:active { transform: scale(0.98); }
button.secondary, .btn.secondary {
  /* 苹果风：次级按钮 = 中性 tinted 填充（无描边） */
  background: var(--fill-gray);
  color: var(--brand);
  border: 1px solid transparent;
  box-shadow: none;
}
button.secondary:hover, .btn.secondary:hover {
  background: var(--fill-gray-strong);
  color: var(--brand-dark);
}
button.danger, .btn.danger { background: var(--err); color: var(--text-on-brand); }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* 图标按钮原语（UI 增补规范 §4）：方形透明，仅 hover 显底色 */
.icon-btn, .inv-drawer-close, .pe-notify-toast-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
}
.icon-btn:hover, .inv-drawer-close:hover, .pe-notify-toast-close:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin: 0.45rem 0;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
/* 业务表样式见下文 pe-table · UI-APPLE-01（旧 class 作别名） */

/* ========== UI-MODULE: list-shell ========== */
/* —— 库存宽屏工作台 —— */
.inv-shell {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: calc(100vh - var(--nav-h) - 8rem);
}
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* 左筛选 + 主区（详情为 fixed overlay，不占布局流） */
.inv-workspace {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: stretch;
  min-height: calc(100vh - var(--nav-h) - 6.5rem);
  container-type: inline-size;
}
@container (max-width: 720px) {
  .inv-workspace { grid-template-columns: 1fr; }
  .inv-filter-sidebar { position: static; max-height: none; }
}
.inv-filter-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 0.4rem);
  max-height: calc(100vh - var(--nav-h) - 0.8rem);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 0.7rem 0.6rem 0.85rem;
  -webkit-overflow-scrolling: touch;
}
.inv-facet-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 0.25rem;
  min-width: 0;
}
.inv-facet-search input[type="search"] {
  width: 100%;
  font-size: 0.9375rem;
  padding: 0.35rem 0.45rem;
}
.inv-facet-block {
  margin-top: 0.7rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}
.inv-facet-block h4 {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}
.inv-facet-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.3rem 0.4rem;
  align-items: center;
  min-width: 0;
  margin: 0.12rem 0;
  padding: 0.12rem 0.15rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  cursor: pointer;
  min-width: 0;
}
.inv-facet-item:hover { background: var(--surface-pearl); }
.inv-facet-item:has(input:checked) { background: var(--row-selected); }
.inv-facet-item.is-zero {
  opacity: 0.45;
  cursor: default;
}
.inv-facet-item input { margin: 0; }
.inv-facet-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.inv-facet-count {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.8125rem;
  min-width: 1.6rem;
  text-align: right;
}
.inv-facet-more {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.875rem;
  color: var(--brand);
  cursor: pointer;
}
.inv-facet-empty { margin: 0.2rem 0; font-size: 0.875rem; }
/* 左栏快捷筛选：chip 按钮 + 搜索框 */
.inv-filter-sidebar .facet-search {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.9375rem;
  padding: 0.35rem 0.45rem;
}
.facet-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.facet-btn {
  border: 1px solid var(--line);
  background: var(--surface-pearl);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: 0.22rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
}
.facet-btn:hover { border-color: var(--brand); }
.facet-btn.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--text-on-brand);
}
.inv-facet-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}
.inv-facet-dates input[type="date"] {
  flex: 1 1 5.5rem;
  min-width: 0;
  font-size: 0.8125rem;
  padding: 0.25rem;
}
.inv-facet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}
.inv-facet-actions .btn { font-size: 0.875rem; padding: 0.35rem 0.65rem; }
.inv-main-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* 列表页：表格卡填满右栏，使左右面板底边对齐（LIST-SHELL-01 完整性） */
.inv-main-col > .card.inv-table-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.inv-main-col > .card.inv-table-card > .table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
/* 印射对照：右栏 #map-table 非 .card.inv-table-card，单独对齐左右底边 */
.inv-main-col > #map-table {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.inv-main-col > #map-table > .table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.inv-chips-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 0.5rem 0.75rem;
  box-shadow: var(--shadow);
}
.inv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  min-width: 0;
}
.inv-chips-label {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 600;
}
.inv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--info-soft);
  border: 1px solid transparent;
  color: var(--brand-dark);
  text-decoration: none;
  font-size: 0.875rem;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-chip:hover {
  background: var(--row-selected);
  color: var(--brand);
}
.inv-chip-clear {
  font-size: 0.875rem;
  color: var(--muted);
  margin-left: 0.2rem;
}
.inv-totals { font-size: 0.9375rem; white-space: nowrap; }
.inv-tools-collapse { margin: 0; }
.inv-tools-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}
.inv-tools-inner h3 { font-size: 1rem; margin: 0 0 0.35rem; }
/* compact / dense / 行状态：见 pe-table 分区 */
@media (max-width: 1024px) {
  .inv-workspace {
    grid-template-columns: 1fr;
    /* 行按内容排布：否则注入的「筛选」按钮所在行会被容器 min-height
       （calc(100vh - …)）均摊拉伸 → 整行变成一块高约 300px 的空白大框 */
    align-content: start;
  }
  .inv-filter-sidebar {
    position: relative;
    top: 0;
    max-height: 42vh;
  }
  .inv-tools-inner { grid-template-columns: 1fr; }
  .inv-filter-sidebar { display: none; }
  .inv-filter-sidebar.is-expanded { display: block; }
  .inv-sidebar-toggle {
    display: inline-flex; align-items: center; gap: .35rem;
    margin: 0 0 .5rem; padding: .35rem .75rem;
    border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: var(--card); color: var(--text); font-size: 0.875rem; cursor: pointer;
    /* 自身不随网格拉伸：只占内容尺寸、靠左（否则整行高/整行宽 = 空白大框） */
    align-self: start;
    justify-self: start;
    width: auto;
  }
}
@media (min-width: 1025px) {
  .inv-sidebar-toggle { display: none; }
}
.inv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.inv-toolbar .page-title { margin: 0; }
.inv-toolbar .page-sub { margin: 0.2rem 0 0; }
.inv-toolbar-actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; }
.inv-tools-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  align-items: center;
}
.inv-tools-row input[name="q"],
.inv-tools-row input[name="product"] {
  min-width: 10rem;
  flex: 1 1 10rem;
}
.inv-collapsible {
  margin: 0;
}
.inv-collapsible > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--brand);
  list-style: none;
  user-select: none;
}
.inv-collapsible > summary::-webkit-details-marker { display: none; }
.inv-collapsible > summary::before {
  content: "▸ ";
  color: var(--muted);
}
.inv-collapsible[open] > summary::before { content: "▾ "; }
.inv-table-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0.55rem 0.65rem 0.7rem;
}
.inv-table-card .table-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin: 0 0 0.4rem;
  align-items: center;
}
.table-scroll.inv-scroll {
  flex: 1 1 auto;
  max-height: calc(100vh - 12.5rem);
  min-height: 280px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.inv-pager {
  margin: 0.45rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}

/* 侧栏详情抽屉 */
.inv-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--overlay-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-4) var(--ease-decel);
}
.inv-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.inv-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9001;
  width: min(520px, 100vw);
  height: 100vh;
  background: var(--card);
  box-shadow: var(--shadow-float);
  transform: translateX(105%);
  transition: transform var(--dur-4) var(--ease-decel);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line-soft);
  container-type: inline-size;
}
@container (max-width: 480px) {
  .inv-drawer-actions { display: grid; grid-template-columns: 1fr; }
}
.inv-drawer.is-open { transform: translateX(0); }
.inv-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-pearl);
}
.inv-drawer-head h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.inv-drawer-head .sub {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}
.inv-drawer-close {
  background: var(--line);
  color: var(--text);
  min-width: 2.2rem;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-pill);
}
.inv-drawer-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0.85rem 1rem 1.25rem;
  -webkit-overflow-scrolling: touch;
}
/* kv 键值表：见 pe-kv 分区 */
.inv-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
}
.inv-drawer-section h3 {
  margin: 0.6rem 0 0.4rem;
  font-size: 1rem;
}
.inv-drawer-empty {
  color: var(--muted);
  padding: 1.5rem 0.5rem;
  text-align: center;
}

/* 常用宽度密度 */
@media (min-width: 1600px) {
  .pe-table--list,
  table.inventory-export-table { font-size: 0.9375rem; }
  .inv-drawer { width: min(560px, 38vw); }
  .table-scroll.inv-scroll { max-height: calc(100vh - 11.5rem); }
}
@media (max-width: 1366px) {
  .pe-table--list,
  table.inventory-export-table { font-size: 0.875rem; }
  .pe-table--list th,
  .pe-table--list td,
  table.inventory-export-table th,
  table.inventory-export-table td { padding: 0.32rem 0.42rem; }
  .pe-table--list.inv-dense th,
  .pe-table--list.inv-dense td,
  table.inventory-export-table.inv-dense th,
  table.inventory-export-table.inv-dense td,
  table.data.inv-dense th,
  table.data.inv-dense td {
    padding: 0.2rem 0.36rem;
    font-size: 0.8125rem;
  }
}
@media (max-width: 1024px) {
  .inv-drawer { width: min(100vw, 440px); }
  .table-scroll.inv-scroll { max-height: calc(100vh - 14rem); }
  .inv-tools-row input[name="q"] { min-width: 8rem; }
}
@media (max-width: 768px) {
  body.layout-fluid .app-main { padding: 0.5rem 0.45rem 0.75rem; }
  .inv-drawer { width: 100vw; }
  .pe-kv th,
  .inv-drawer-body .kv th { width: 5.8rem; }
  .table-scroll.inv-scroll { max-height: calc(100vh - 15rem); min-height: 220px; }
  h1.page-title { font-size: 1.25rem; }
}

/* ========== UI-MODULE: tables ========== */
/* ========== pe-table · UI-APPLE-01（统一业务表 · 唯一真相） ==========
   员工端业务表只维护本分区；旧 class（data / inventory-export-table /
   inv-dense / compact / kv）作别名挂接，禁止再写第二套 padding/色。
   甘特 dhtmlx 网格（.gantt_*）不在此范围。 */
.pe-table,
table.data {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
  background: var(--card);
  color: var(--text);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pe-table th,
.pe-table td,
table.data th,
table.data td {
  border-bottom: 1px solid var(--line-soft);
  border-right: none;
  border-left: none;
  border-top: none;
  padding: 0.55rem 0.65rem;
  color: inherit;
}
.pe-table td,
table.data td {
  text-align: left;
}
/* 表头默认水平居中（UI-APPLE 表规范 · 含 .num 列标题） */
.pe-table th,
table.data th,
.pe-table thead th,
table.data thead th {
  text-align: center;
  background: var(--surface-pearl);
  font-weight: 600;
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  text-transform: none;
}
.pe-table tr.partial,
.pe-table tr.is-partial,
table.data tr.partial,
table.data tr.is-partial { background: var(--row-partial); }
.pe-table tbody tr:hover > td,
table.data tbody tr:hover > td { background: var(--row-hover); }
.pe-table tr:last-child td,
table.data tr:last-child td { border-bottom: none; }

/* LIST 主表 */
.pe-table--list,
table.inventory-export-table {
  width: max-content;
  min-width: 100%;
  font-size: 0.9375rem;
  table-layout: auto;
}
.pe-table--list th,
.pe-table--list td,
table.inventory-export-table th,
table.inventory-export-table td {
  white-space: nowrap;
  padding: 0.38rem 0.55rem;
}
.pe-table--list thead th,
table.inventory-export-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--line);
  background: var(--surface-pearl);
}
.pe-table--list tr.inv-row,
table.inventory-export-table tr.inv-row { cursor: pointer; }
.pe-table--list tr.inv-row.is-active td,
table.inventory-export-table tr.inv-row.is-active td {
  background: var(--row-selected) !important;
  outline: 1px solid var(--info-soft-border);
}
.pe-table--list tr.inv-row:hover td,
table.inventory-export-table tr.inv-row:hover td { background: var(--row-hover); }

/* dense：LIST 与任意 data.inv-dense */
.pe-table--list.inv-dense th,
.pe-table--list.inv-dense td,
.pe-table.inv-dense th,
.pe-table.inv-dense td,
table.inventory-export-table.inv-dense th,
table.inventory-export-table.inv-dense td,
table.data.inv-dense th,
table.data.inv-dense td {
  padding: 0.22rem 0.4rem;
  font-size: 0.875rem;
  line-height: 1.25;
}
.pe-table--list.inv-dense tr.inv-row td,
table.inventory-export-table.inv-dense tr.inv-row td,
table.data.inv-dense tr.inv-row td { height: 1.85rem; }
/* 数字列：仅单元格右对齐；表头仍居中（见上 th 规则） */
.pe-table td.num,
.pe-table tbody .num,
table.inventory-export-table td.num,
table.inventory-export-table tbody .num,
table.data td.num,
table.data tbody .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pe-table th.num,
table.inventory-export-table th.num,
table.data th.num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pe-table--list tr.inv-row.is-partial td:first-child,
.pe-table--list tr.inv-row.partial td:first-child,
table.inventory-export-table tr.inv-row.is-partial td:first-child,
table.inventory-export-table tr.inv-row.partial td:first-child {
  box-shadow: inset 3px 0 0 var(--warn);
}
.pe-table--list tr.inv-row.is-reserved td,
table.inventory-export-table tr.inv-row.is-reserved td { background: var(--row-selected); }
.pe-table--list tr.inv-row.is-unmapped td,
table.inventory-export-table tr.inv-row.is-unmapped td,
.pe-table tr.is-unmapped td,
table.data tr.is-unmapped td { border-bottom-style: dashed; }

/* 内容表 */
.pe-table--plain {
  font-size: 0.9375rem;
  width: 100%;
}

/* 编辑表 */
.pe-table--edit th,
.pe-table--edit td {
  padding: 0.22rem 0.4rem;
  font-size: 0.875rem;
  line-height: 1.25;
}
.pe-table--edit input,
.pe-table--edit select,
.pe-table--edit textarea {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.pe-table--edit input:focus,
.pe-table--edit select:focus,
.pe-table--edit textarea:focus {
  border-color: var(--brand-focus);
  outline: 1px solid var(--focus-ring);
  outline-offset: 0;
}

/* 紧凑摘要 */
.pe-table--compact th,
.pe-table--compact td,
table.data.compact th,
table.data.compact td {
  padding: 0.25rem 0.4rem;
  font-size: 0.875rem;
}

/* 键值表 */
.pe-kv,
table.kv,
.inv-drawer-body .kv {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  margin: 0 0 0.85rem;
  background: transparent;
  color: var(--text);
}
.pe-kv th,
.pe-kv td,
table.kv th,
table.kv td,
.inv-drawer-body .kv th,
.inv-drawer-body .kv td {
  border-bottom: 1px solid var(--line-soft);
  padding: 0.4rem 0.35rem;
  text-align: left;
  vertical-align: top;
}
.pe-kv th,
table.kv th,
.inv-drawer-body .kv th {
  width: 7.2rem;
  color: var(--muted);
  font-weight: 600;
  background: transparent;
}

/* 行状态（旧名别名） */
.pe-table tr.is-active > td,
table.data tr.is-active > td { background: var(--row-selected) !important; }
.pe-table tr.is-warn > td,
.pe-table tr.is-over > td,
table.data tr.is-warn > td,
table.data tr.is-over > td,
.sales-table tr.is-over td { background: var(--row-warn); }

/* ========== UI-MODULE: typeahead-forms ========== */
/* ========== typeahead · 统一可搜下拉（docs/TYPEAHEAD_RULE.md） ========== */
.typeahead-field,
.mat-combo-field,
.cust-combo-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9375rem;
  min-width: 0;
}
.cust-combo-field {
  grid-column: span 1;
  max-width: 28rem;
}
.mat-combo-field { max-width: 36rem; }
.typeahead-wrap { position: relative; }
.open-list-search {
  width: 100%;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.55rem 0.7rem !important;
  background: var(--card) !important;
  color: var(--text) !important;
  font-size: 1rem !important;
}
.open-list {
  position: absolute;
  z-index: 90;
  left: 0;
  right: 0;
  top: calc(100% + 3px);
  max-height: 16rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 0.25rem;
  box-sizing: border-box;
  box-shadow: var(--shadow-float);
}
button.open-list-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0 !important;
  background: var(--card) !important;
  color: var(--text) !important;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  font-weight: 400 !important;
  line-height: 1.35;
  transform: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
button.open-list-item:hover,
button.open-list-item.is-active {
  background: var(--surface-pearl) !important;
  color: var(--text) !important;
}
button.open-list-item.is-active {
  box-shadow: inset 0 0 0 1px var(--brand) !important;
}
button.open-list-item.is-selected {
  background: var(--info-soft) !important;
  color: var(--brand-dark) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px var(--brand) !important;
}
.open-list-empty {
  padding: 0.55rem 0.65rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.open-list-status {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.3;
  min-height: 1.2em;
}
/* 订单类别：与 open-list 同契约，保留表格内窄宽 */
.sales-lines .cat-combo.typeahead-wrap { position: relative; }
.sales-lines .cat-open-list.open-list {
  max-height: 10rem;
  z-index: 80;
}
.sales-lines .js-cat-search.open-list-search {
  min-width: 10rem;
  max-width: 14rem;
  font-size: 0.875rem !important;
  padding: 0.28rem 0.4rem !important;
}
/* 映射抽屉内 typeahead 不被裁切 */
.inv-drawer-body .typeahead-wrap { position: relative; }
.inv-drawer-body .open-list { z-index: 120; }

.muted { color: var(--muted); font-size: 0.9375rem; }
.ok, .flash-success { color: var(--ok-text); }
.err, .flash-error { color: var(--err-text); }
.warn, .flash-warning { color: var(--warn-text); }

.flash {
  padding: 0.65rem 0.95rem;
  border-radius: var(--radius-sm);
  margin: 0.5rem 0;
  border: 1px solid var(--line-soft);
  background: var(--card);
}
.flash.success {
  border-color: var(--ok-soft-border);
  background: var(--ok-soft);
  color: var(--ok-text);
}
.flash.error {
  border-color: var(--err-soft-border);
  background: var(--err-soft);
  color: var(--err-text);
}
.flash.warning {
  border-color: var(--warn-soft-border);
  background: var(--warn-soft);
  color: var(--warn-text);
}
.flash.info {
  border-color: var(--info-soft-border);
  background: var(--info-soft);
  color: var(--brand-dark);
}

/* 扫码输入（员工端浅色壳；车间主题另有覆盖） */
.scan-input {
  width: 100%;
  font-size: 1.25rem !important;
  padding: 0.65rem 0.75rem !important;
  border: 1px solid var(--ok) !important;
  border-radius: var(--radius-sm) !important;
  letter-spacing: 0.02em;
  background: var(--card) !important;
  color: var(--text) !important;
}
.scan-input:focus {
  outline: 3px solid var(--ok-soft) !important;
}

/* ========== UI-MODULE: hub-workbench ========== */
/* 工作台页头：「工作台」标题右侧紧贴重置按钮
   注意：h1.page-title 全局为 block；必须用 flex 才能与按钮同一行。
   Manifest 哈希 CSS 变更后必须 collectstatic + 重启 Waitress，否则仍引用旧文件。 */
.hub-page-head {
  margin-bottom: 0.15rem;
}
.hub-page-title-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.hub-page-title-row .page-title,
.hub-page-title-row h1.page-title {
  display: block; /* 保持标题语义，宽度随内容 */
  width: auto;
  margin: 0;
  line-height: 1.15;
  flex: 0 0 auto;
}
.hub-page-head .page-sub {
  margin-bottom: 0.35rem;
}
.hub-reset-btn {
  display: inline-block;
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  padding: 0.35rem 0.75rem;
  font-size: 0.9375rem;
  background: var(--surface-pearl);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: transform var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard);
}
.hub-reset-btn.is-done {
  transform: scale(1.03);
}

/* 首页入口网格（宽屏自动多列 · Apple utility card） */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
  margin-top: 0.65rem;
  width: 100%;
  position: relative;
  touch-action: pan-y;
}
.hub-grid[data-hub-sortable] .hub-card {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none; /* 禁止 <a> 原生拖出链接地址 */
  user-drag: none;
  touch-action: pan-y; /* 默认允许纵向下滑；编辑/拖拽中由 is-hub-editing 锁为 none */
  will-change: transform;
  transition:
    transform var(--dur-3) var(--ease-decel),
    box-shadow var(--dur-2) var(--ease-standard),
    border-color var(--dur-1) var(--ease-standard),
    opacity var(--dur-2) var(--ease-standard);
}
/* 标题/正文/任意子节点：整卡都是拖拽热区，且禁止子级原生拖拽 */
.hub-grid[data-hub-sortable] .hub-card *,
.hub-grid[data-hub-sortable] .hub-card h3,
.hub-grid[data-hub-sortable] .hub-card p {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none; /* 事件落到卡片本身，避免点到文字触发链接拖 */
}
.hub-grid[data-hub-sortable] .hub-card {
  pointer-events: auto;
}
.hub-grid[data-hub-sortable] .hub-card:active {
  cursor: grabbing;
}
.hub-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.2rem;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  position: relative;
  transition: transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard);
}
.hub-card:hover {
  border-color: rgba(0, 102, 204, 0.28);
  transform: translateY(-2px);
  box-shadow: var(--shadow-float);
  color: var(--text);
}
/* 拖拽中：悬停抬起关闭，避免与 iOS 抬起冲突 */
.hub-grid.is-hub-sorting .hub-card:hover {
  transform: none;
}
.hub-card.is-dragging {
  cursor: grabbing !important;
  border-color: var(--brand-focus);
  z-index: 1000;
  will-change: transform;
}
/* 跨区拖动：候选目标分区亮虚线底纹，提示可放置 */
.hub-grid.is-drop-candidate {
  outline: 1px dashed var(--brand, #0066cc);
  outline-offset: 6px;
  border-radius: var(--radius-lg);
}
/* 触屏长按激活：轻微摇动提示进入编辑模式，防误触 */
.hub-card.is-jiggle {
  animation: pe-hub-jiggle var(--dur-3) ease-in-out infinite; /* motion-allowlist: 装饰循环 */
  border-color: var(--brand-focus);
}
@keyframes pe-hub-jiggle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px) rotate(-0.6deg); }
  75% { transform: translateX(2px) rotate(0.6deg); }
}
/* 显式编辑模式：移动端「编辑卡片」按钮激活时，网格卡片整体可拖、按钮高亮 */
.hub-grid.is-hub-editing .hub-card {
  border-color: var(--brand-focus);
  touch-action: none; /* 编辑态锁定纵向滚动，避免编辑中误滑 */
}
.hub-grid.is-hub-editing .hub-card:active {
  cursor: grabbing;
}
#hub-save-order.is-editing {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--text-on-brand);
}
.hub-card-placeholder {
  display: block;
  box-sizing: border-box;
  border: 1px dashed var(--brand-focus);
  border-radius: var(--radius-lg);
  background: var(--info-soft);
  opacity: 0.85;
  pointer-events: none;
  min-height: 5rem;
  transition: transform var(--dur-3) var(--ease-decel);
}
.hub-grid .pe-shadow-ph,
.pe-shadow-ph {
  /* 预测落点：虚线 + 半透明，令牌变量 */
  border: 1px dashed var(--muted, #888);
  background: transparent;
  opacity: 0.55;
  pointer-events: none;
}
body.is-hub-dragging {
  cursor: grabbing;
  user-select: none;
}
body.is-hub-dragging * {
  cursor: grabbing !important;
}
.hub-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.hub-card-title.is-editable,
.wb-nav-text.hub-card-title.is-editable { cursor: text; }
.hub-card-title.is-editable:hover { outline: 1px dashed var(--line); outline-offset: 2px; }
.hub-grid[data-hub-sortable] .hub-card .hub-card-title.is-editable {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
.hub-grid[data-hub-sortable] .hub-card .hub-card-title.is-editing {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}
.hub-card-title.is-editing,
.wb-nav-text.hub-card-title.is-editing {
  cursor: text;
  outline: 1px solid var(--brand-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  background: var(--surface-pearl);
  color: var(--text);
}
/* 工作台「编辑文案」统一行内编辑（与大卡片标题同族；日夜对等，仅用 var()） */
body.hub-copy-editing .pe-copy[data-pe-copy] {
  cursor: text;
  outline: 1px dashed var(--line);
  outline-offset: 2px;
}
body.hub-copy-editing .pe-copy[data-pe-copy].is-editing {
  cursor: text;
  outline: 1px solid var(--brand-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  background: var(--surface-pearl);
  color: var(--text);
}
body.hub-copy-editing .hub-grid[data-hub-sortable] .hub-card .pe-copy[data-pe-copy] {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

/* 镜像超管「修改权限」编辑态：关闭（隐藏）卡片 */
.hub-card .hub-card-deny-btn {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 5;
  width: 1.6rem;
  height: 1.6rem;
  min-width: 1.6rem;
  min-height: 1.6rem;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: var(--card);
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  display: none !important;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}
body.is-hub-perm-editing .hub-card .hub-card-deny-btn {
  display: inline-flex !important;
}
body.is-hub-perm-editing .hub-grid[data-hub-sortable] .hub-card .hub-card-deny-btn {
  pointer-events: auto;
  z-index: 6;
}
body.is-hub-perm-editing .hub-card .hub-card-deny-btn:hover {
  background: var(--card);
  border-color: var(--warn) !important;
  box-shadow: 0 0 0 3px var(--warn-soft-border), var(--shadow);
}
body.is-hub-perm-editing .hub-card {
  cursor: default;
}
body.is-hub-perm-editing .hub-card.is-denied {
  opacity: 0.45;
}
body.is-hub-perm-editing .hub-card.is-denied .hub-card-deny-btn {
  background: var(--err, #d93025);
  border-color: var(--err, #d93025);
  color: var(--text-on-brand, #fff);
}
body.is-hub-perm-editing .hub-card.is-denied .hub-card-deny-btn:hover {
  background: var(--err, #d93025);
  border-color: var(--warn) !important;
  box-shadow: 0 0 0 3px var(--warn-soft-border);
}

.hub-card .hub-stat {
  margin: 0.55rem 0 0;
  font-size: 0.9375rem;
  color: var(--brand);
}
.hub-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.hub-section {
  margin: 1.75rem 0 0.55rem;
  font-size: 0.875rem;
  color: var(--muted-soft);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* 空态：面/字/线全部走令牌，禁止写死 #fafbfc 等浅色底 */
.empty {
  padding: 1rem 1.15rem;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-pearl);
}
.empty .muted {
  color: var(--muted-soft);
}
/* 表格内空态：与表体同色阶，避免「白框浮在深色表上」 */
table.data td > .empty {
  background: var(--surface-pearl);
  border-color: var(--line);
  margin: 0.15rem 0;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 0.75rem 0;
  font-size: 1rem;
}

/* 车间终端深色模式覆盖（在 body.theme-workshop 下） */
body.theme-workshop {
  --ws-header-bg: #0a0a0a;
  --ws-panel-bg: #222222;
  --ws-phosphor: #00ff00;
  --ws-phosphor-dim: #00aa00;
  --ws-panel-border: #00aa00;
  --ws-link: #88ccff;
  --ws-header-text: #eeeeee;
  --ws-bg: #111111;
  --ws-text: #eeeeee;
  --ws-muted: #99aabb;
  --ws-table-head-bg: #2a2a2a;
  --ws-table-head-text: #dddddd;
  --ws-table-border: #333333;
  --ws-input-border: #444444;

  background: var(--ws-bg);
  color: var(--ws-text);
}
body.theme-workshop .app-header { background: var(--ws-header-bg); color: var(--ws-header-text); }
body.theme-workshop .app-main { max-width: none; width: 100%; }
body.theme-workshop .card {
  background: var(--ws-panel-bg);
  border-color: var(--ws-table-border);
  color: var(--ws-text);
}
body.theme-workshop .muted { color: var(--ws-muted); }
body.theme-workshop table.data th { background: var(--ws-table-head-bg); color: var(--ws-table-head-text); }
body.theme-workshop table.data td { border-color: var(--ws-table-border); }
body.theme-workshop input,
body.theme-workshop select {
  background: var(--ws-panel-bg);
  color: var(--ws-text);
  border-color: var(--ws-input-border);
}
body.theme-workshop .scan-input {
  background: var(--ws-panel-bg) !important;
  color: var(--ws-phosphor) !important;
  border-color: var(--ws-phosphor-dim) !important;
}
body.theme-workshop .ws-link { color: var(--ws-link); }

/* 打印：壳层隐藏 */
@media print {
  .app-header,
  .noprint,
  .no-print,
  .toolbar {
    display: none !important;
  }
  body.app-body {
    background: #fff;
  }
  .app-main {
    max-width: none;
    padding: 0;
    margin: 0;
  }
  .card {
    box-shadow: none;
    border: none;
    padding: 0;
  }
}

/* 大屏全屏：不使用员工顶栏样式时由页面自控 */
body.theme-wall {
  background: #0b1220;
  color: #e8eef8;
  overflow: hidden;
}
body.theme-wall .app-header { display: none; }
body.theme-wall .app-main {
  max-width: none;
  padding: 0;
  margin: 0;
}

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 1rem;
  background: var(--surface-pearl);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

/* —— 实时变量条（工作台独立分区，标题为 base.html 的 hub-section） —— */
.live-status {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem 0.6rem;
  margin: 0.55rem 0 1rem;
  box-shadow: var(--shadow);
}
.live-status-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  margin-bottom: 0.55rem;
  font-size: 0.9375rem;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-soft);
  animation: live-pulse var(--loop-slow, 2s) ease-in-out infinite; /* motion-allowlist: 装饰循环 */
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.live-mode {
  font-size: 0.8125rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--info-soft);
  color: var(--brand);
}
.live-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.live-now-btn,
.live-sync-btn {
  padding: 0.3rem 0.7rem !important;
  font-size: 0.875rem !important;
}
.live-sync-btn {
  /* UI-APPLE-01：主按钮用品牌蓝强调，白字；日/夜自动对等 */
  background: var(--brand);
  color: var(--text-on-brand);
}
.live-sync-btn:hover {
  background: var(--brand-focus);
  filter: none;
}
.live-sync-btn.htmx-request {
  opacity: 0.65;
  pointer-events: none;
}
.htmx-indicator {
  display: none;
  font-size: 0.875rem;
}
.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request {
  display: inline;
}
/* 模态框：确认 / 全量同步状态 */
.app-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--overlay-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
/* PeConfirm / 带 hidden 的 backdrop 默认隐藏（amderp 注入的无 hidden 仍直接显示） */
.app-modal-backdrop[hidden] {
  display: none !important;
}
body.pe-confirm-open {
  overflow: hidden;
}
.app-modal {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-float);
  color: var(--text);
}
.app-modal-wide { max-width: 520px; }
.app-modal-title {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
}
.app-modal-body {
  margin: 0 0 1rem;
  font-size: 1rem0.9375rem
  line-height: 1.5;
  color: var(--muted);
}
.app-modal-body.warn { color: var(--warn); }
.app-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}
.sync-status-banner {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}
.sync-status-banner.is-running {
  background: var(--surface-pearl);
  color: var(--muted);
  border: 1px solid var(--line);
}
.sync-status-banner.is-done {
  background: var(--ok);
  color: var(--text-on-brand);
}
.sync-status-banner.is-error {
  background: var(--err);
  color: var(--text-on-brand);
}
.sync-status-msg {
  font-weight: 600;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}
.sync-status-table { font-size: 0.9375rem; }
.sync-status-hint { margin: 0.6rem 0 0; }
#amderp-sync-btn {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}



/* 实时变量：默认 hub 磁吸网格（细则 + 页内兜底见 _live_status_strip.html） */
.live-status-grid.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr));
  gap: 0.65rem;
  margin-top: 0;
}
.live-status-grid .hub-card.live-card {
  padding: 0.8rem 0.9rem;
  cursor: grab;
}
.live-status-grid .hub-card.live-card h3 {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 0.3rem;
}
.live-status-grid .hub-card.live-card .live-chip-val {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.live-status-grid .hub-card.live-card.changed {
  border-color: var(--chip-changed-border, var(--brand-focus));
  box-shadow: 0 0 0 2px var(--chip-changed-bg, var(--info-soft));
}
/* 兼容旧 class（若局部仍用 chip） */
.live-chip {
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.45rem;
}
.live-chip-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
}
.live-chip-val {
  display: block;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.live-footnote {
  margin: 0.45rem 0 0;
  font-size: 0.8125rem;
}
body.theme-workshop .live-status,
body.theme-wall .live-status {
  display: none;
}


/* ===== Sales P0（全宽，与库存宽屏一致） ===== */
.sales-page {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
.sales-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; align-items:flex-start; margin-bottom:.5rem; }
.sales-tabs { display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0; }
.sales-tabs a { padding:.35rem .7rem; border-radius:var(--radius-pill); border:1px solid var(--line); text-decoration:none; color:var(--text); font-size: 0.9375rem; }
.sales-tabs a.is-active { background:var(--brand); color:var(--text-on-brand); border-color:var(--brand); }
.sales-search { margin:.4rem 0 .6rem; }
.sales-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  /* 苹果风：状态胶囊 = 软填充，无描边 */
  background: var(--fill-gray);
  border: 1px solid transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}
.sales-badge.warn {
  background: var(--warn-soft);
  border-color: transparent;
  color: var(--warn-text);
}
.sales-credit {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  margin: .5rem 0;
  box-shadow: var(--shadow);
  color: var(--text);
}
.sales-credit.is-over {
  border-color: var(--warn);
  background: var(--warn-soft);
}
.sales-credit-title { font-weight:700; margin-bottom:.45rem; display:flex; gap:.5rem; align-items:center; }
.sales-credit-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:.45rem; }
.sales-credit-grid .lbl { display:block; font-size: 0.8125rem; color:var(--muted); }
.sales-credit-grid strong { font-size: 1.125rem; color: var(--text); }
.sales-progress { display:flex; list-style:none; padding:0; margin:.6rem 0; gap:.35rem; flex-wrap:wrap; }
.sales-progress li {
  padding: .3rem .65rem;
  border-radius: var(--radius-pill);
  background: var(--surface-pearl);
  border: 1px solid var(--line-soft);
  font-size: 0.875rem;
  color: var(--muted);
}
.sales-progress li.is-done {
  background: var(--ok-soft);
  border-color: var(--ok-soft-border);
  color: var(--ok-text);
}
.sales-progress li.is-current {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--text-on-brand);
  font-weight: 600;
}
/* .sales-table tr.is-over → 见 pe-table 行状态 */
/* 表单区在宽屏下最多两列，避免输入框无限拉长 */
.sales-form { max-width: min(1100px, 100%); }
.account-form .form-row input,
.account-form .form-row select,
.account-form .form-row textarea { width: 100%; box-sizing: border-box; font-size: 0.9375rem; padding: .45rem .55rem; }
.sales-form-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:.65rem; align-items:end; }
.sales-form-grid label { display:flex; flex-direction:column; gap:.35rem; font-size: 0.9375rem; font-weight:600; min-width:0; color:var(--text); }
.sales-form-grid label.full { grid-column:1/-1; }
.sales-form-grid input, .sales-form-grid select, .sales-form-grid textarea { width:100%; font-weight:400; }
/* 表头工具行：字段 + 加一行（底对齐，按钮不随明细下移） */
.sales-form-grid.inbound-header .inbound-add-slot,
.sales-form-grid.quote-header .inbound-add-slot {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 0;
}
.sales-form-grid.inbound-header .inbound-add-label,
.sales-form-grid.quote-header .inbound-add-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  min-height: 1.2em;
  color: transparent;
  user-select: none;
}
.sales-form-grid.inbound-header .inbound-add-slot .btn,
.sales-form-grid.quote-header .inbound-add-slot .btn {
  align-self: flex-start;
  white-space: nowrap;
}
/* 表头：时间框与「加一行」同高（box-sizing 含边框） */
.sales-form-grid.inbound-header input[type="datetime-local"],
.sales-form-grid.quote-header input[type="datetime-local"],
.sales-form-grid.inbound-header .inbound-add-slot .btn,
.sales-form-grid.quote-header .inbound-add-slot .btn {
  height: 2.5rem;
  min-height: 2.5rem;
  max-height: 2.5rem;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.25;
}
.sales-form-grid.inbound-header .inbound-add-slot .btn,
.sales-form-grid.quote-header .inbound-add-slot .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 1.15rem;
  padding-right: 1.15rem;
}
.sales-form-grid.inbound-header input[type="datetime-local"],
.sales-form-grid.quote-header input[type="datetime-local"] {
  display: flex;
  align-items: center;
}
.sales-lines input { width:100%; min-width:4rem; font-size: 0.9375rem; padding:.3rem; }
.sales-form-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem; align-items:center; }
.sales-timeline { list-style:none; padding:0; margin:0; }
.sales-timeline li { padding:.45rem 0; border-bottom:1px solid var(--line); font-size: 0.9375rem; }
.sales-boss-actions { display:grid; gap:1rem; }
.sales-reason-list { display:flex; flex-direction:column; gap:.3rem; margin:.4rem 0; }
.sales-reason-item { font-size: 0.9375rem; min-width:0; }
.sales-mobile-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:50;
  background: var(--header-bg); padding:.35rem; gap:.25rem;
  justify-content:space-around; box-shadow:0 -2px 10px rgba(0,0,0,.15);
}
.sales-mobile-nav a { color:var(--text-on-brand); text-decoration:none; font-size: 0.875rem; padding:.45rem .5rem; }
@media (max-width: 900px) {
  .sales-form-grid { grid-template-columns:1fr; }
  .sales-mobile-nav { display:flex; }
  .sales-page { padding-bottom:3.5rem; }
  .sales-table thead { display:none; }
  .sales-table tr { display:block; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:.55rem; padding:.4rem; background:var(--card); }
  .sales-table td { display:flex; justify-content:space-between; border:none; padding:.25rem .2rem; }
  .sales-table td::before { content:attr(data-label); color:var(--muted); font-size: 0.875rem; margin-right:.5rem; }
}

/* Impersonate */
.impersonate-banner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 0.5rem; padding: 0.45rem 0.85rem; background: var(--warn-soft); color: var(--warn-text);
  border: 1px solid var(--warn-soft-border);
  font-size: 0.9375rem; position: sticky; top: 0; z-index: 200;
}
.impersonate-banner a { color: var(--warn-text); margin-right: 0.6rem; }
.impersonate-banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.impersonate-inline-form { display: inline; margin: 0; }
.impersonate-hint { font-size: 0.8125rem; color: var(--muted, #666); margin: 0 0 0.5rem; line-height: 1.35; }
.impersonate-filter { width: 100%; margin-bottom: 0.45rem; padding: 0.3rem 0.4rem; box-sizing: border-box; }
.impersonate-inline-form button {
  background: transparent; border: 1px solid var(--warn-text); color: var(--warn-text);
  border-radius: var(--radius-sm); padding: 0.15rem 0.5rem; cursor: pointer; font-weight: 600;
}
/* 员工壳：切换账号在左上品牌旁，勿靠右「退出」 */
.impersonate-dropdown.staff {
  display: inline-block;
  position: relative;
  margin: 0;
}
.impersonate-dropdown.staff summary::-webkit-details-marker { display: none; }
.impersonate-dropdown.staff .impersonate-panel {
  position: absolute;
  left: 0;
  right: auto;
  top: 120%;
  z-index: 300;
  width: min(280px, 85vw);
  max-height: 60vh;
  overflow: auto;
  background: var(--card);
  color: var(--text);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  padding: 0.5rem;
}
.impersonate-dropdown.staff .impersonate-user-list { list-style: none; margin: 0; padding: 0; }
.impersonate-dropdown.staff .impersonate-user-btn {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line) !important;
  background: var(--surface-pearl) !important;
  color: var(--muted) !important;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.45rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500 !important;
  margin: 0.15rem 0;
  transform: none !important;
}
.impersonate-dropdown.staff .impersonate-user-btn:hover {
  border-color: var(--brand) !important;
  background: var(--info-soft) !important;
  color: var(--muted) !important;
}
/* 无业务角色的 staff：灰显（仍可切换） */
.impersonate-dropdown.staff .impersonate-user-btn.is-muted {
  opacity: 0.55;
  border-style: dashed !important;
  background: transparent !important;
}
.impersonate-dropdown.staff .impersonate-user-btn.is-muted:hover {
  opacity: 1;
}
.impersonate-dropdown.staff .impersonate-user-btn.is-muted .impersonate-groups {
  color: var(--muted) !important;
}
.impersonate-dropdown.staff .impersonate-groups {
  display: block;
  color: var(--text) !important;
  font-size: 0.8125rem;
}
.impersonate-dropdown.staff .impersonate-pin {
  float: right;
  color: var(--brand);
  font-size: 0.8125rem;
}
.impersonate-dropdown.staff .impersonate-stop-btn {
  width: 100%; border: none; background: var(--err); color: var(--text-on-brand); border-radius: var(--radius-sm);
  padding: 0.4rem; font-weight: 600; cursor: pointer; margin-bottom: 0.4rem;
}
body.is-impersonating .app-header { top: auto; }
body.is-pe-dev .impersonate-banner { display: none !important; }

/*
 * 夜间模式组件补丁
 * 令牌已在 html[data-theme=dark] 与日间对等覆盖；此处只处理：
 * 1) 仍写死浅色的遗留样式  2) 全局 button 白字覆盖  3) flash 等语义软底
 * 新组件应只使用 var(--*)，原则上无需再加 dark 规则。
 */
html[data-theme="dark"] a { color: var(--brand-on-dark); }
html[data-theme="dark"] a:hover { color: var(--brand-on-dark); filter: brightness(1.12); }

/* 夜间：链接形式的主按钮（a.btn）必须是白字，不能被 a 的浅蓝覆盖（UI-APPLE-01） */
html[data-theme="dark"] a.btn { color: var(--text-on-brand); }
html[data-theme="dark"] a.btn:hover { color: var(--text-on-brand); filter: none; }

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input:not([type]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--surface-pearl);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"] {
  color-scheme: dark;
}
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  opacity: 0.8;
}
html[data-theme="dark"] button.secondary,
html[data-theme="dark"] .btn.secondary {
  background: var(--surface-pearl);
  color: var(--brand-on-dark);
  border-color: var(--line);
}
html[data-theme="dark"] button.secondary:hover,
html[data-theme="dark"] .btn.secondary:hover {
  background: var(--surface-hover);
  color: var(--brand-on-dark);
}

/* 表色已走令牌；日夜同选择器，无需单独硬覆盖 pe-table/data */
html[data-theme="dark"] .pe-table th,
html[data-theme="dark"] table.data th {
  background: var(--surface-pearl);
  color: var(--muted);
}
html[data-theme="dark"] .pe-table td,
html[data-theme="dark"] table.data td {
  color: var(--text);
  border-bottom-color: var(--line-soft);
}

/* flash：语义软底（日间为浅 tint，夜间为深 tint） */
html[data-theme="dark"] .flash.success {
  border-color: var(--ok-soft-border);
  background: var(--ok-soft);
  color: var(--ok-text);
}
html[data-theme="dark"] .flash.error {
  border-color: var(--err-soft-border);
  background: var(--err-soft);
  color: var(--err-text);
}
html[data-theme="dark"] .flash.warning {
  border-color: var(--warn-soft-border);
  background: var(--warn-soft);
  color: var(--warn-text);
}
html[data-theme="dark"] .flash.info {
  border-color: var(--info-soft-border);
  background: var(--info-soft);
  color: var(--brand-on-dark);
}

/* 全局 button 白字 → 列表项/账号按钮强制回令牌 */
html[data-theme="dark"] .impersonate-dropdown.staff .impersonate-user-btn,
html[data-theme="dark"] button.open-list-item,
html[data-theme="dark"] button.cat-combo-item,
html[data-theme="dark"] button.ms-opt {
  background: var(--surface-pearl) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .impersonate-dropdown.staff .impersonate-user-btn:hover,
html[data-theme="dark"] button.open-list-item:hover,
html[data-theme="dark"] button.cat-combo-item:hover,
html[data-theme="dark"] button.ms-opt:hover {
  background: var(--info-soft) !important;
  color: var(--muted) !important;
  border-color: var(--brand) !important;
}
html[data-theme="dark"] button.open-list-item.is-selected,
html[data-theme="dark"] button.cat-combo-item.is-selected,
html[data-theme="dark"] button.ms-opt.is-on {
  background: var(--row-selected) !important;
  color: var(--brand-on-dark) !important;
}

/* 遗留硬编码浅蓝芯片 */
html[data-theme="dark"] .inv-chip {
  background: var(--info-soft);
  color: var(--brand-on-dark);
}
html[data-theme="dark"] .inv-chip:hover {
  background: var(--info-soft-border);
  color: var(--brand-on-dark);
}
html[data-theme="dark"] .inv-facet-item:has(input:checked) {
  background: var(--row-selected);
}
html[data-theme="dark"] .ms-chip {
  background: var(--info-soft);
  border-color: var(--info-soft-border);
  color: var(--brand-on-dark);
}
html[data-theme="dark"] .ms-chip-x { color: var(--brand-on-dark); }
html[data-theme="dark"] .ms-chip-x:hover {
  background: var(--info-soft);
  color: var(--text);
}

/* 顶栏下拉等已用 var 的容器无需重复；保证弹层对比度 */
html[data-theme="dark"] .impersonate-dropdown.staff .impersonate-panel,
html[data-theme="dark"] .app-modal,
html[data-theme="dark"] .ms-box,
html[data-theme="dark"] .ms-panel,
html[data-theme="dark"] .open-list,
html[data-theme="dark"] .cat-open-list {
  background: var(--card);
  color: var(--text);
  border-color: var(--line);
}

/* ---- 站内通知：铃铛 / 面板 / Toast ---- */
.pe-notify-bell-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.pe-notify-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: color-mix(in srgb, var(--text-on-brand) 80%, transparent);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.pe-notify-bell:hover {
  background: var(--surface-hover);
  color: var(--text-on-brand);
}
.pe-notify-bell-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--err);
  color: var(--text-on-brand);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}
.pe-notify-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  width: 300px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}
.pe-notify-panel-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
}
.pe-notify-panel-item a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pe-notify-panel-item a:hover {
  background: var(--surface-hover);
}
.pe-notify-panel-item-unread a {
  font-weight: 600;
}
.pe-notify-panel-empty {
  padding: 0.75rem;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
}

.pe-notify-toast-host {
  position: fixed;
  top: calc(var(--nav-h) + 12px);
  right: 12px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 320px;
  pointer-events: none;
}
.pe-notify-toast {
  position: relative;
  pointer-events: auto;
  padding: 0.65rem 2.2rem 0.65rem 0.75rem;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  cursor: pointer;
  animation: pe-notify-in var(--dur-4) var(--ease-decel);
}
/* 重要程度三色：仅左边条变色；border-left 必须写在 border-color 之后，避免被覆盖 */
.pe-notify-toast-info {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
}
.pe-notify-toast-warn {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--warn);
}
.pe-notify-toast-urgent {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--err);
}
.pe-notify-toast-level {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.25rem;
}
.pe-notify-toast-info .pe-notify-toast-level {
  color: var(--brand);
  background: var(--info-soft);
  border: 1px solid var(--info-soft-border);
}
.pe-notify-toast-warn .pe-notify-toast-level {
  color: var(--warn-text);
  background: var(--warn-soft);
  border: 1px solid var(--warn-soft-border);
}
.pe-notify-toast-urgent .pe-notify-toast-level {
  color: var(--err-text);
  background: var(--err-soft);
  border: 1px solid var(--err-soft-border);
}
.pe-notify-toast-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 2px;
}
.pe-notify-toast-body {
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pe-notify-toast-close {
  position: absolute;
  top: 4px;
  right: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.pe-notify-toast-close:hover { color: var(--text); }
.pe-notify-panel-item-info { border-left: 3px solid var(--brand); }
.pe-notify-panel-item-warn { border-left: 3px solid var(--warn); }
.pe-notify-panel-item-urgent { border-left: 3px solid var(--err); }
.notify-level-badge {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.08rem 0.4rem;
  border-radius: var(--radius-pill);
  margin-right: 0.35rem;
  vertical-align: middle;
}
.notify-level-badge.info {
  color: var(--brand);
  background: var(--info-soft);
  border: 1px solid var(--info-soft-border);
}
.notify-level-badge.warn {
  color: var(--warn-text);
  background: var(--warn-soft);
  border: 1px solid var(--warn-soft-border);
}
.notify-level-badge.urgent {
  color: var(--err-text);
  background: var(--err-soft);
  border: 1px solid var(--err-soft-border);
}
.notify-center-item.info { border-left: 3px solid var(--brand); padding-left: 0.5rem; }
.notify-center-item.warn { border-left: 3px solid var(--warn); padding-left: 0.5rem; }
.notify-center-item.urgent { border-left: 3px solid var(--err); padding-left: 0.5rem; }
@keyframes pe-notify-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- 站内通知：面板头 / 开关 / 中心页 ---- */
.pe-notify-panel {
  width: 340px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}
/* 移动端：面板改为固定在视口右上，宽度受限并留边距，避免 340px 探出屏幕 */
@media (max-width: 768px) {
  .pe-notify-panel {
    position: fixed;
    top: calc(var(--nav-h, 3.5rem) + 0.75rem);
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-width: 420px;
    margin-left: auto;
    z-index: 130;
  }
  /* 移动端导航下拉：面板定位由 base.html JS 接管（钳视口两侧，绕开含块歧义）。
     此 CSS 仅保证面板不在视口宽度上制造横向滚动。 */
  .app-nav details.nav-dd {
    position: static;
  }
}
.pe-notify-panel-list {
  overflow-y: auto;
  flex: 1 1 auto;
  max-height: 260px;
}
.pe-notify-panel-head {
  padding: 0.6rem 0.75rem 0.4rem;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.pe-notify-panel-title {
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.pe-notify-panel-unread-badge {
  background: var(--err);
  color: var(--text-on-brand);
  border-radius: var(--radius-pill);
  padding: 0 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.3;
}
.pe-notify-panel-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.pe-notify-panel-btn {
  border: 1px solid var(--line);
  background: var(--surface-hover);
  color: var(--text);
  border-radius: var(--radius);
  padding: 0.2rem 0.5rem;
  font-size: 0.8125rem;
  cursor: pointer;
}
.pe-notify-panel-btn:hover { border-color: var(--brand); color: var(--brand); }
.pe-notify-panel-link {
  font-size: 0.8125rem;
  color: var(--brand);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.pe-notify-panel-foot {
  padding: 0.45rem 0.75rem 0.6rem;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.pe-notify-panel-switches {
  display: flex;
  gap: 0.9rem;
  align-items: center;
}
.pe-notify-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  color: var(--text);
  cursor: pointer;
}
.pe-notify-switch input { accent-color: var(--brand); }
.pe-notify-panel-hint {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.pe-notify-panel-item a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.35;
  white-space: normal;
}
.pe-notify-panel-item-title {
  font-size: 0.875rem;
}
.pe-notify-panel-item-body {
  color: var(--muted);
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notify-center-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1rem;
  align-items: start;
  container-type: inline-size;
}
@container (max-width: 720px) {
  .notify-center-grid { grid-template-columns: 1fr; }
}
.notify-center-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
}
.notify-center-item {
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.notify-center-item:last-child { border-bottom: none; }
.notify-center-item.is-unread .notify-center-item-title { font-weight: 600; }
.notify-center-item-main {
  color: var(--text);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.notify-center-item-title { font-size: 0.875rem; }
.notify-center-item-body { font-size: 0.8125rem; color: var(--muted); }
.notify-center-item-meta {
  font-size: 0.8125rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.notify-prefs-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
}
.notify-pref-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--text);
}
.notify-pref-row input[type=checkbox] { accent-color: var(--brand); }
.notify-pref-row input[type=time] {
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-pearl);
  color: var(--text);
}
.notify-quiet-active {
  color: var(--err);
  font-size: 0.8125rem;
  font-weight: 600;
}
@media (max-width: 720px) {
  .notify-center-grid { grid-template-columns: 1fr; }
}

/* ---- admin 双端预览：顶栏「移动端」按钮 + 左侧手机尺寸预览栏（390×844，仅超管可见） ---- */
/* 遮罩：预览打开时不再用实心遮罩挡桌面，改为透明仅用于占位/外部点击关闭；桌面工作台保持可见可交互 */
.pe-dev-backdrop {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: transparent;
  pointer-events: none;
}
.pe-dev-previewbar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(420px, 42vw);
  max-width: 100vw;
  z-index: 6001;
  display: flex;
  flex-direction: column;
  background: var(--card);
  color: var(--text);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow-float);
}
/* 预览打开时，主区（右侧内容）让出左侧同宽，避免卡片被预览栏遮挡 */
body.pe-mobile-preview-open .app-main,
body.pe-mobile-preview-open .app-header-inner,
body.pe-mobile-preview-open .live-status,
body.pe-mobile-preview-open .hub-page-head,
body.pe-mobile-preview-open .workbench-shell,
body.pe-mobile-preview-open .container,
body.pe-mobile-preview-open .page-wrap {
  padding-left: min(420px, 42vw);
}
/* display:flex 会盖掉 [hidden] 的 UA 样式，须显式补回 */
.pe-dev-previewbar[hidden],
.pe-dev-backdrop[hidden] { display: none; }
.pe-dev-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
/* 舞台：绝对定位铺满侧栏剩余高度（避免 flex 下 height:100% 塌成 0） */
.pe-dev-stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--surface-pearl);
}
/* iframe 盒：inset 铺满 stage */
.pe-dev-frame-box {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  background: var(--bg);
}
.pe-dev-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg);
}

/* === Mobile (<=430px) overflow hardening — safe, does not affect desktop === */
img,
video,
canvas {
  max-width: 100%;
  height: auto;
}

table {
  max-width: 100%;
}

.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

@media (max-width: 430px) {
  /* prevent any residual page-level horizontal scroll */
  main.app-main,
  .app-main {
    overflow-x: clip;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  /* full-width cards / forms / modals so fixed max-widths cannot overflow */
  .card,
  .sales-form-grid,
  .app-modal,
  .app-modal-wide,
  form.card,
  .login-card {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* stack horizontal flex rows that would otherwise overflow */
  .row,
  .pe-form-row,
  .sales-form-grid,
  .kv-grid,
  .pe-kv {
    flex-wrap: wrap;
  }
  .row > *,
  .pe-form-row > * {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* form controls never exceed viewport */
  input,
  select,
  textarea,
  button,
  .btn {
    max-width: 100%;
  }
  /* allow long text cells to wrap instead of forcing horizontal scroll */
  td,
  th {
    overflow-wrap: anywhere;
  }
}

/* ========== UI-MODULE: feature-pages / mobile-edit ========== */
/* === MOBILE-EDIT-01：多行录入表 ≤768 行→卡片（禁止依赖整表横滚） === */
@media (max-width: 768px) {
  .pe-table--edit {
    min-width: 0 !important;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  .pe-table--edit thead {
    display: none;
  }
  .pe-table--edit tbody {
    display: block;
    width: 100%;
  }
  .pe-table--edit tbody tr {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
  }
  .pe-table--edit tbody td {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.3rem 0.55rem;
    align-items: center;
    width: 100%;
    min-width: 0 !important;
    max-width: none !important;
    border: 0 !important;
    padding: 0.4rem 0 !important;
    background: transparent !important;
  }
  .pe-table--edit tbody td::before {
    content: attr(data-label);
    font-size: 0.8125rem;
    line-height: 1.25;
    color: var(--muted);
    font-weight: 600;
  }
  .pe-table--edit tbody td[data-label=""],
  .pe-table--edit tbody td:not([data-label]) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
  }
  .pe-table--edit tbody td[data-label=""]::before,
  .pe-table--edit tbody td:not([data-label])::before {
    content: none;
  }
  .pe-table--edit .typeahead-wrap,
  .pe-table--edit .ib-qty-wrap,
  .pe-table--edit input,
  .pe-table--edit select,
  .pe-table--edit textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  /* 录入表外层若套了 table-scroll，窄屏禁止横滚（改走卡片） */
  .table-scroll:has(> .pe-table--edit),
  .table-scroll:has(.pe-table--edit),
  .order-lines-wrap:has(.pe-table--edit),
  .inbound-lines-wrap:has(.pe-table--edit) {
    overflow-x: visible !important;
    overflow-y: visible;
  }
}


/* —— AMDERP 外接服务器状态灯（admin 顶栏壳层 · CHROME-LOCK：新增元素，不改既有壳） —— */
.app-amderp-status {
  gap: 0.35rem;
  cursor: default;
  font-variant-numeric: tabular-nums;
}
.app-amderp-status .amderp-status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 3px var(--warn-soft);
}
.app-amderp-status[data-state="ok"] .amderp-status-dot {
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-soft);
}
.app-amderp-status[data-state="down"] .amderp-status-dot {
  background: var(--err);
  box-shadow: 0 0 0 3px var(--err-soft);
  animation: live-pulse var(--loop-slow, 2s) ease-in-out infinite; /* motion-allowlist: 故障提醒 */
}
.app-amderp-status .amderp-status-name {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.app-amderp-status .amderp-status-text {
  font-weight: 600;
  opacity: 0.92;
}
@media (max-width: 720px) {
  /* 窄屏只留「AMDERP + 状态点」，避免顶栏换行挤压 */
  .app-amderp-status .amderp-status-text { display: none; }
}

/* —— 手机单行顶栏（方案 C）：≤640px 把次要入口收进「⋯」面板；桌面/平板完全不变 ——
   搬移由 base.html 的脚本完成（搬节点而非复制，事件监听随节点走） */
.app-more { display: none; }
@media (max-width: 640px) {
  .app-more { display: inline-flex; position: relative; }
  .app-more > summary.app-more-summary {
    list-style: none;
    cursor: pointer;
    min-width: 2rem;
    justify-content: center;
  }
  .app-more > summary.app-more-summary::-webkit-details-marker { display: none; }
  .app-more[open] > summary.app-more-summary {
    background: color-mix(in srgb, #ffffff 22%, #161617 78%) !important;
  }
  .app-more-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 330;
    min-width: 11.5rem;
    max-width: min(82vw, 18rem);
    max-height: calc(100vh - var(--nav-h, 3.5rem) - 1rem);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-float, 0 8px 24px rgba(0, 0, 0, 0.18));
  }
  /* 菜单行：左对齐、去胶囊观感（颜色一律走令牌，日夜对等） */
  .app-more-panel > * {
    display: flex !important;
    width: 100%;
    margin: 0 !important;
    padding: 0.45rem 0.6rem !important;
    justify-content: flex-start !important;
    align-items: center;
    gap: 0.4rem;
    border-color: transparent !important;
    background: transparent !important;
    color: var(--text) !important;
    font-weight: 600 !important;
    text-align: left;
    border-radius: var(--radius-sm, 8px) !important;
    min-height: 2.25rem;
  }
  .app-more-panel > *:hover {
    background: var(--surface-hover, rgba(127, 127, 127, 0.14)) !important;
    color: var(--text) !important;
    text-decoration: none;
  }
  /* Admin 链接在壳层里有更高优先级的胶囊规则 → 这里再抬一级 */
  .app-user .app-more-panel > a.app-user-admin.header-action-chip {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--text) !important;
  }
  /* 搬进来的「切换账号」details：摘要吃菜单行样式，展开内容改为流内（避免右侧菜单向右溢出） */
  .app-more-panel > details > summary {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0.45rem 0.6rem;
    justify-content: flex-start;
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-sm, 8px);
  }
  .app-more-panel > details > summary::-webkit-details-marker { display: none; }
  .app-more-panel > details > summary > .header-action-chip {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--text) !important;
    padding: 0 !important;
    min-height: 0 !important;
    font-weight: 600 !important;
  }
  .app-more-panel > details[open] > summary {
    background: var(--surface-hover, rgba(127, 127, 127, 0.14));
  }
  .app-more-panel .impersonate-dropdown.staff .impersonate-panel {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-height: 50vh !important;
    box-shadow: none !important;
  }
  /* 窄屏用户名截断，为单行腾出宽度 */
  .app-user-name { max-width: 6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 400px) {
  .app-user-name { max-width: 4.5em; }
  /* 360px 级：压间距 + 收 AMDERP 胶囊内边距，保证顶栏仍是单行（实测 360px 需要再省 ~16px） */
  .app-header-inner { gap: 0.5rem; }
  .app-brand-row { gap: 0.35rem; }
  .app-user { gap: 0.3rem; }
  .app-amderp-status { padding: 0.25rem 0.4rem; }
}

/* —— 全站无障碍：请求减弱动效时，关闭过渡与动画（保留状态变化本身） —— */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   操作手册（/ops/manual/）：业务边列表 / 类型徽标 / 定义列表
   颜色全部走令牌（日/夜同名），夜间自动对等
   --------------------------------------------------------------------------- */
.manual-edges { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.manual-edges li {
  display: flex; gap: 0.45rem; align-items: baseline; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 0.32rem;
  font-size: 0.875rem; line-height: 1.5;
}
.manual-edges li:last-child { border-bottom: 0; }
.manual-kind {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.03em;
  border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 0.05rem 0.42rem; color: var(--muted); white-space: nowrap;
}
.manual-kind--form { color: var(--warn-text); background: var(--warn-soft); border-color: var(--warn-soft-border); }
.manual-kind--api { color: var(--ok-text); background: var(--ok-soft); border-color: var(--ok-soft-border); }
.manual-text { color: var(--text); font-weight: 500; }
.manual-dl { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.4rem 0.6rem; margin: 0.4rem 0 0; font-size: 0.875rem; line-height: 1.55; }
.manual-dl dt { color: var(--muted); }
.manual-dl dd { margin: 0; }
@media (max-width: 560px) {
  .manual-dl { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .manual-dl dt { margin-top: 0.4rem; }
}

/* 操作手册：窄屏表格降噪（隐藏次要列 + 允许长路径换行，避免挤压标题列） */
@media (max-width: 560px) {
  .manual-table .mcol, .manual-table .acol { display: none; }
  .manual-table th, .manual-table td { font-size: 0.8125rem; }
  .manual-table td { overflow-wrap: anywhere; }
  .manual-table td.mono a { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
}

/* 操作手册：手机端表格固定列宽（长路径换行，标题不被挤到屏幕外） */
@media (max-width: 560px) {
  .manual-table { table-layout: fixed; width: 100%; }
  .manual-table th:first-child, .manual-table td:first-child { width: 48%; }
  .manual-table th:nth-child(2), .manual-table td:nth-child(2) { width: 52%; }
  .manual-table td { white-space: normal; }
}

/* 操作手册：手机端覆盖 mobile_hacks 的「表格最小宽 640px」，改为固定列宽换行 */
@media (max-width: 560px) {
  .manual-table { min-width: 0 !important; max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   操作手册 · 流程图（Cytoscape.js 本地 vendor）
   --------------------------------------------------------------------------- */
.op-graph-wrap { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.5rem 0.6rem 0.7rem; }
.op-graph-toolbar { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; font-size: 0.8125rem; }
.op-graph { width: 100%; height: min(68vh, 680px); border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); }
@media (max-width: 560px) { .op-graph { height: min(62vh, 480px); } }
.op-graph-legend { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--muted); }
.graph-lg { margin-right: 0.45rem; }
.graph-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; display: inline-block; background: var(--muted); }
.graph-dot--0 { background: #0a84ff; }
.graph-dot--1 { background: #ff9f0a; }
.graph-dot--2 { background: #30d158; }
.graph-dot--3 { background: #bf5af2; }
.graph-dot--4 { background: #64d2ff; }
.graph-dot--5 { background: #8e8e93; }
.graph-dot--6 { background: #ff375f; }
.graph-dot--branch { background: transparent; border: 1.5px dashed var(--muted); }
.graph-dash { width: 1.4rem; height: 0; border-top: 2px dashed #bf5af2; display: inline-block; }
.graph-check { display: flex; align-items: center; gap: 0.4rem; padding: 0.22rem 0.3rem; font-size: 0.8125rem; color: var(--text); cursor: pointer; border-radius: 8px; }
.graph-check:hover { background: var(--surface-pearl, rgba(0,0,0,.03)); }
.graph-select { width: 100%; padding: 0.3rem 0.4rem; font-size: 0.8125rem; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--card); color: var(--text); }

/* ---------------------------------------------------------------------------
   操作手册 · 流程图进度时间轴（对标数字孪生「运输进度」条）
   --------------------------------------------------------------------------- */
.op-timeline { min-height: 0; }
.op-timeline .ot-track {
  display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 0.45rem 0.2rem 0.3rem;
  scrollbar-width: thin;
}
.op-timeline .ot-node {
  display: grid; justify-items: center; gap: 0.15rem; min-width: 5.2rem;
  background: none; border: 0; padding: 0 0.15rem; cursor: pointer; color: var(--muted);
  font: inherit; text-align: center;
}
.op-timeline .ot-dot {
  width: 0.95rem; height: 0.95rem; border-radius: 999px; display: block;
  border: 2px solid var(--line-strong, #d2d2d7); background: var(--card);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.op-timeline .ot-no { font-size: 0.6875rem; font-weight: 600; color: var(--muted); }
.op-timeline .ot-label { font-size: 0.6875rem; line-height: 1.25; max-width: 5.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-timeline .ot-line { flex: 1 1 auto; min-width: 1.2rem; height: 2px; background: var(--line-soft); margin-top: 0.45rem; border-radius: 2px; transition: background 260ms ease; }
.op-timeline .ot-node.is-past .ot-dot { background: var(--ok, #34c759); border-color: var(--ok, #34c759); }
.op-timeline .ot-node.is-past + .ot-line { background: var(--ok, #34c759); }
.op-timeline .ot-node.is-on { color: var(--text); }
.op-timeline .ot-node.is-on .ot-dot {
  background: #ffd60a; border-color: #ff9f0a; transform: scale(1.25);
  animation: ot-pulse 1.1s ease-in-out infinite;
}
.op-timeline .ot-node.is-on .ot-no { color: #9a6700; }
@keyframes ot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 159, 10, 0.45); }
  50% { box-shadow: 0 0 0 0.42rem rgba(255, 159, 10, 0); }
}
@media (prefers-reduced-motion: reduce) { .op-timeline .ot-node.is-on .ot-dot { animation: none; } }

/* ---------------------------------------------------------------------------
   操作手册 · 流程图（第三版：分区/全屏/缩放工具条）
   --------------------------------------------------------------------------- */
.op-graph-stage { display: flex; flex-direction: column; gap: 0.4rem; }
.op-graph-tools { display: inline-flex; gap: 0.3rem; align-items: center; }
.graph-tool-btn {
  min-width: 2.1rem; padding: 0.22rem 0.5rem; font-size: 0.8125rem; line-height: 1.35;
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--card); color: var(--text); cursor: pointer;
}
.graph-tool-btn:hover { border-color: var(--line-strong, #d2d2d7); }
.graph-tool-btn:active { transform: translateY(1px); }
.graph-seg { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.graph-seg-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.24rem 0.5rem; font-size: 0.8125rem; border-radius: 999px;
  border: 1px solid var(--line-soft); background: var(--card); color: var(--text); cursor: pointer;
}
.graph-seg-btn.is-on { background: var(--brand, #0a84ff); border-color: var(--brand, #0a84ff); color: var(--text-on-brand, #fff); }
.graph-seg-btn.is-on .muted { color: rgba(255, 255, 255, 0.75); }

/* 全屏：优先用 Fullscreen API；不支持时用 CSS 兜底铺满视口 */
.op-graph-stage:fullscreen,
.op-graph-stage:-webkit-full-screen { background: var(--bg); padding: 0.6rem 0.8rem 0.7rem; gap: 0.5rem; }
.op-graph-stage:fullscreen .op-graph,
.op-graph-stage:-webkit-full-screen .op-graph { height: calc(100vh - 9.5rem); }
body.is-graph-fs { overflow: hidden; }
body.is-graph-fs .op-graph-stage {
  position: fixed; inset: 0; z-index: 1200; background: var(--bg);
  padding: 0.6rem 0.8rem 0.7rem; gap: 0.5rem;
}
body.is-graph-fs .op-graph { height: calc(100vh - 9.5rem); }
@media (max-width: 560px) {
  body.is-graph-fs .op-graph, .op-graph-stage:fullscreen .op-graph { height: calc(100vh - 11rem); }
  .graph-seg-btn { font-size: 0.75rem; padding: 0.2rem 0.42rem; }
}

/* ========== UI-MODULE: apple-style ========== */
/* 苹果风收尾（规范 docs/UI_APPLE_THEME.md §4.9 / §5.11）：细节层，不改变布局 */
/* 细滚动条（overlay 观感）：桌面可见但极轻，避免抢视觉 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); background-clip: content-box; }
/* 胶囊/徽章按压反馈（iOS 触感；与按钮 .btn:active 一致） */
.role-chip:active,
.sales-badge:active,
.inv-chip:active,
.header-action-chip:active { transform: scale(0.97); }
.role-chip, .sales-badge, .inv-chip, .header-action-chip {
  transition: background var(--dur-1) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
}

/* ========== UI-MODULE: apple-style · 第二轮（2026-10-13） ========== */
/* ① 主区背景：macOS 观感的极浅纵向渐层（屏幕专属；打印不受影响） */
@media screen {
  body {
    background-image: linear-gradient(
      180deg,
      color-mix(in srgb, var(--card) 60%, var(--bg)) 0,
      var(--bg) 340px
    );
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
}
/* ② 原生控件跟随品牌色（勾选框/单选 = 苹果蓝，免自绘） */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
/* ②b 左侧筛选区：iOS「分组列表」观感（圆角行 + 发丝线 + tinted 选中） */
.inv-facet-block { border-top: 1px solid var(--hairline); }
.inv-facet-block h4 { font-weight: 600; letter-spacing: -0.01em; }
.inv-facet-item {
  border-radius: 8px;
  padding: 0.3rem 0.45rem;
  transition: background var(--dur-1) var(--ease-standard);
}
.inv-facet-item:hover { background: var(--fill-gray); }
.inv-facet-item:has(input:checked) {
  background: var(--info-soft);
  font-weight: 500;
}
.inv-facet-item:has(input:checked):hover { background: var(--info-soft); }
/* ③ 业务表：行 hover 软底 + 行高向 44px 靠（苹果表规范） */
.pe-table tbody tr,
table.data tbody tr { transition: background var(--dur-1) var(--ease-standard); }
.pe-table tbody tr:hover,
table.data tbody tr:hover { background: var(--fill-gray); }
.pe-table td,
table.data td { padding: 0.62rem 0.7rem; }
.pe-table thead th,
table.data thead th {
  background: var(--surface-pearl);
  border-bottom: 1px solid var(--hairline-strong);
}
/* ④ 抽屉 / 弹层 / 下拉：毛玻璃（vibrancy） */
.inv-drawer {
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-left: 1px solid var(--hairline);
}
.inv-drawer-backdrop.is-open {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.app-modal, .nav-dd-panel, .dd-menu, .ms-panel, .impersonate-panel, .notify-center-item {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--card) 92%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .inv-facet-item, .pe-table tbody tr, table.data tbody tr { transition: none; }
}

/* ========== UI-MODULE: customer-picker（客户可搜下拉 · 2026-10-14） ========== */
/* 原生 select 在移动端无输入筛选能力（OS 选择器），客户 200+ 条只能盲滚；
   这里给「升级后的客户组合框」做样式：移动端可点、不裁切、软键盘不缩放。 */
.cust-combo { position: relative; width: 100%; }
/* 原生 select 退居"表单值载体"：视觉隐藏但保留边界框（自动化仍可 select_option） */
/* 注意：.sales-form-grid select 等规则会把宽度拉满 → 这里用更高特异性压回 1×1 */
.cust-combo .cust-combo-native,
.cust-combo-native {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}
.cust-combo .js-cust-search { width: 100%; }
.cust-combo .open-list {
  /* 客户名可能较长：允许换行，避免靠省略号吞掉区分信息 */
  max-height: min(56vh, 22rem);
  -webkit-overflow-scrolling: touch;
}
.cust-combo .open-list-item {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  line-height: 1.4;
}
.cust-combo .cust-combo-hint { margin-top: 0.25rem; }
/* 触屏：候选做成整行大目标（≥44px），避免误点/点不中 */
@media (pointer: coarse) {
  .cust-combo .open-list-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
  }
  .cust-combo .open-list { max-height: min(48vh, 20rem); }
  /* iOS 聚焦缩放：输入框字号必须 ≥16px（令牌 1rem = 16px，这里显式兜底） */
  .cust-combo .js-cust-search { font-size: 16px !important; }
}