/* ==========================================================================
   织链云 V2 布业管理系统 UI 统一配色与主页可视化样式表
   ========================================================================== */

:root {
  /* 二、基础颜色 */
  --color-page: #F4FAF5;            /* 护眼工作底：页面主背景 */
  --color-surface: #E6F4E7;         /* 内容表面：表格、表单和主要工作区域 */
  --color-base: #CCE8CF;            /* 基准护眼绿：抽屉背景、结构层和品牌基底 */
  --color-duck-egg: #E0EEE8;        /* 鸭卵青：表头、指标区、摘要和次级入口 */
  --color-ai-green: #A4E2C6;        /* 艾绿：选中、成功状态和一级入口 */
  --color-bamboo: #789262;          /* 竹青：图形标记、进度条和完成边界 */
  --color-moon-white: #D6ECF0;      /* 月白：区块标题、工具栏、页签和悬停 */
  --color-dai-blue: #425066;        /* 黛蓝：侧栏、链接、信息状态和页签文字 */
  --color-nav-active: #56677F;      /* 导航选中：当前侧栏菜单背景 */

  --color-action: #49794E;          /* 主操作绿：保存、新建、提交和确认按钮 */
  --color-action-hover: #345B38;    /* 主操作悬停：主按钮悬停和成功文字 */
  --color-selection: #A4E2C6;       /* 选中行背景 */
  --color-hover: #D6ECF0;           /* 悬停浅底 */
  --color-link: #425066;            /* 链接色 */

  --color-text: #203C23;            /* 正文墨绿：正文、金额、数量和重要状态 */
  --color-text-secondary: #345B38;  /* 次级正文 */
  --color-border: #AED5B2;          /* 普通边框：表格、工作面和普通分隔 */
  --color-border-strong: #71AD77;   /* 强边框：控件边界和重点分隔 */
  --color-control-border: #5A9660;  /* 控件边框：输入框、下拉框和普通按钮 */

  /* 三、提醒与危险色 */
  --color-warning: #F0C239;         /* 缃色：草稿、待处理等小面积提醒标签 */
  --color-warning-border: #8B6A32;  /* 深缃：提醒边框、图标和较大文字 */
  --color-warning-text: #6B5128;    /* 提醒深文字：浅黄背景上的小号文字 */
  --color-warning-soft: #F7F0D8;    /* 提醒浅底：提醒说明和注意事项 */

  --color-danger: #8F3D46;          /* 胭脂：危险文字、错误边框、删除入口 */
  --color-danger-strong: #9D2933;   /* 强胭脂：危险确认按钮和严重错误提示 */
  --color-danger-hover: #74313A;    /* 危险悬停 */
  --color-danger-soft: #F7ECEE;     /* 危险浅底：错误提示和危险状态背景 */

  /* 兼容既有 CSS 变量 */
  --ink: var(--color-text);
  --muted: var(--color-text-secondary);
  --line: var(--color-border);
  --soft: var(--color-page);
  --paper: var(--color-surface);
  --nav: var(--color-dai-blue);
  --nav2: var(--color-nav-active);
  --brand: var(--color-action);
  --brand-dark: var(--color-action-hover);
  --green: var(--color-action);
  --red: var(--color-danger);
  --blue: var(--color-link);
  --shadow: 0 4px 16px rgba(32,60,35,.08);

  /* 业务活动卡片与传统色别名 */
  --trad-duck-egg: var(--color-duck-egg, #E0EEE8);
  --trad-moon-white: var(--color-moon-white, #D6ECF0);
  --trad-dai-blue: var(--color-dai-blue, #425066);
  --green-300: var(--color-base, #CCE8CF);
  --green-600: var(--color-control-border, #5A9660);
  --color-focus: var(--color-control-border, #5A9660);

  /* 入退管理纺织图标规范 (TEXTILE-ICON-REPLICATION-SPEC) */
  --textile-tile-bg: #789262;
  --textile-icon-line: #FFFBF0;
}

.action-tile > b.textile-tile,
.action-tile[class*="tone-"] > b.textile-tile {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  background: var(--textile-tile-bg, #789262) !important;
  color: var(--textile-icon-line, #FFFBF0) !important;
  font-size: 0;
  border: 0;
}

.textile-icon {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--textile-icon-line, #FFFBF0) !important;
  --icon-action: var(--textile-icon-line, #FFFBF0);
  border: 0;
}

/* --------------------------------------------------------------------------
   全局与基础框架重构
   -------------------------------------------------------------------------- */
body {
  background-color: var(--color-page) !important;
  color: var(--color-text) !important;
}

/* 侧栏样式 */
.rail {
  background: var(--color-dai-blue) !important;
  border-right: 1px solid var(--color-border-strong);
}
.brand {
  border-bottom: 1px solid rgba(214, 236, 240, 0.15) !important;
}
.brand-mark {
  background: var(--color-action) !important;
}
.brand strong {
  color: #FFFFFF !important;
}
.brand small {
  color: var(--color-duck-egg) !important;
}
.nav-item {
  color: var(--color-moon-white) !important;
}
.nav-item:hover {
  background: rgba(214, 236, 240, 0.12) !important;
  color: #FFFFFF !important;
}
.nav-item.active {
  background: var(--color-nav-active) !important;
  color: #FFFFFF !important;
}
.nav-item.active::before {
  background: var(--color-ai-green) !important;
}
.live-dot {
  background: var(--color-ai-green) !important;
}
.rail-foot {
  color: var(--color-duck-egg) !important;
  border-top: 1px solid rgba(214, 236, 240, 0.15) !important;
}

/* 顶部栏 */
.topbar {
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.topbar h1 {
  color: var(--color-text) !important;
}
.topbar p#crumb {
  color: var(--color-text-secondary) !important;
}
.search {
  background: var(--color-page) !important;
  border-color: var(--color-control-border) !important;
}
.search input {
  color: var(--color-text) !important;
}
.icon-btn, .user-btn {
  background: var(--color-surface) !important;
  border-color: var(--color-control-border) !important;
  color: var(--color-text) !important;
}
.icon-btn:hover, .user-btn:hover {
  background: var(--color-hover) !important;
  border-color: var(--color-border-strong) !important;
}

/* 多页签系统 */
.workspace-tabs {
  background: var(--color-moon-white) !important;
  border-bottom: 1px solid var(--color-border-strong) !important;
}
.workspace-tab {
  background: var(--color-duck-egg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-dai-blue) !important;
}
.workspace-tab:hover {
  background: var(--color-hover) !important;
  color: var(--color-text) !important;
}
.workspace-tab.active {
  background: var(--color-surface) !important;
  color: var(--color-dai-blue) !important;
  box-shadow: inset 0 3px 0 var(--color-ai-green) !important;
  font-weight: 700;
}

/* 抽屉 */
.drawer {
  background: var(--color-base) !important;
  box-shadow: -4px 0 20px rgba(32, 60, 35, 0.12) !important;
}
.drawer-head {
  background: var(--color-duck-egg) !important;
  border-bottom: 1px solid var(--color-border-strong) !important;
}
.drawer-head h2 {
  color: var(--color-text) !important;
}
.drawer-head small {
  color: var(--color-text-secondary) !important;
}
.drawer-head-actions .drawer-back {
  background: var(--color-surface) !important;
  border-color: var(--color-control-border) !important;
  color: var(--color-text) !important;
}
.drawer-head-actions .drawer-back:hover {
  background: var(--color-hover) !important;
  border-color: var(--color-border-strong) !important;
}
.drawer-head-actions .drawer-close {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
}
.drawer-body {
  background: var(--color-base) !important;
}
.backdrop {
  background: rgba(32, 60, 35, 0.35) !important;
}

/* 按钮通用统一 */
.btn {
  background: var(--color-surface) !important;
  border-color: var(--color-control-border) !important;
  color: var(--color-text) !important;
}
.btn:hover {
  background: var(--color-hover) !important;
  border-color: var(--color-border-strong) !important;
}
.btn.primary {
  background: var(--color-action) !important;
  border-color: var(--color-action) !important;
  color: #FFFFFF !important;
}
.btn.primary:hover {
  background: var(--color-action-hover) !important;
  border-color: var(--color-action-hover) !important;
}
.btn.success {
  background: var(--color-ai-green) !important;
  border-color: var(--color-control-border) !important;
  color: var(--color-text) !important;
}
.btn.danger {
  background: var(--color-danger-soft) !important;
  border-color: var(--color-danger) !important;
  color: var(--color-danger) !important;
}
.btn.danger:hover {
  background: var(--color-danger) !important;
  color: #FFFFFF !important;
}

/* 表单与输入框 */
.field input, .field select, .field textarea,
input[type="text"], input[type="number"], input[type="date"], select, textarea {
  border: 1px solid var(--color-control-border) !important;
  color: var(--color-text) !important;
  background-color: #FFFFFF !important;
}
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--color-action) !important;
  box-shadow: 0 0 0 2px var(--color-ai-green) !important;
  outline: none !important;
}

/* 卡片与工作区块 */
.section {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.section-head {
  background: var(--color-moon-white) !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}
.section-head h2 {
  color: var(--color-text) !important;
  font-weight: 700;
}
.section-head p {
  color: var(--color-text-secondary) !important;
}

/* 指标区 (Metric Strip) */
.metric-strip {
  background: var(--color-duck-egg) !important;
  border: 1px solid var(--color-border) !important;
}
.metric {
  border-right: 1px solid var(--color-border) !important;
}
.metric small {
  color: var(--color-text-secondary) !important;
}
.metric strong {
  color: var(--color-text) !important;
}
.metric em {
  color: var(--color-bamboo) !important;
}

/* 数据表格 (Data Table) */
.data-table th {
  background: var(--color-duck-egg) !important;
  color: var(--color-text) !important;
  border-bottom: 1px solid var(--color-border-strong) !important;
}
.data-table td {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.data-table tbody tr:hover td {
  background: var(--color-moon-white) !important;
}
.data-table tr.selected-row td, .selected-row td {
  background: var(--color-ai-green) !important;
  color: var(--color-text) !important;
}

/* 标签 (Tag) */
.tag {
  background: var(--color-duck-egg) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}
.tag.ok {
  background: var(--color-ai-green) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border-strong) !important;
  font-weight: 700 !important;
}
.tag.warn {
  background: var(--color-warning-soft) !important;
  color: var(--color-warning-text) !important;
  border-color: var(--color-warning-border) !important;
  font-weight: 700 !important;
}
.tag.bad {
  background: var(--color-danger-soft) !important;
  color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  font-weight: 700 !important;
}

/* 汇总与工具栏 */
.summary-line, .sheet-summary, .inventory-total {
  background: var(--color-duck-egg) !important;
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}
.summary-line b, .sheet-summary b, .inventory-total b {
  color: var(--color-text) !important;
}

/* 链接 */
.link, a {
  color: var(--color-link) !important;
  text-decoration: underline;
}

/* 进度条 */
.bar {
  background: var(--color-duck-egg) !important;
  border: 1px solid var(--color-border) !important;
}
.bar span {
  background: var(--color-bamboo) !important;
}

/* 登录面板 */
.auth-gate {
  background: var(--color-page) !important;
}
.auth-panel {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-strong) !important;
  box-shadow: 0 16px 40px rgba(32, 60, 35, 0.12) !important;
}
.auth-panel h2 {
  color: var(--color-text) !important;
}
.auth-panel button#authSubmit {
  background: var(--color-action) !important;
  color: #FFFFFF !important;
}
.auth-panel button#authSubmit:hover {
  background: var(--color-action-hover) !important;
}

/* 试用横幅与角色横幅 */
.trial-license-banner {
  background: var(--color-warning-soft) !important;
  border-bottom: 1px solid var(--color-warning-border) !important;
  color: var(--color-warning-text) !important;
}
.trial-license-banner[data-state="ACTIVE"] {
  background: var(--color-surface) !important;
  border-bottom-color: var(--color-border-strong) !important;
  color: var(--color-action) !important;
}
.trial-license-banner[data-state="EXPIRED"],
.trial-license-banner[data-state="MACHINE_MISMATCH"],
.trial-license-banner[data-state="INVALID"] {
  background: var(--color-danger-soft) !important;
  border-bottom-color: var(--color-danger) !important;
  color: var(--color-danger) !important;
}

/* ==========================================================================
   主页可视化改造：仓库库存分布柱状图
   ========================================================================== */

.warehouse-chart-card {
  margin-bottom: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

.warehouse-chart-head {
  min-height: 52px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--color-moon-white);
  border-bottom: 1px solid var(--color-border);
}

.warehouse-chart-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.warehouse-chart-title h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.warehouse-chart-title span {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.warehouse-chart-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 分段切换控件：重量 / 匹数 */
.chart-metric-segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--color-control-border);
  border-radius: 6px;
  background: var(--color-surface);
}

.chart-metric-segmented button {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text);
  font-size: 12px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.chart-metric-segmented button.active {
  background: var(--color-ai-green);
  color: var(--color-text);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(32, 60, 35, 0.15);
}

.chart-metric-segmented button:focus-visible {
  outline: 2px solid var(--color-control-border);
  outline-offset: 1px;
}

/* 柱状图主容器 */
.warehouse-bar-chart-wrap {
  padding: 16px 20px 14px;
  background: var(--color-surface);
  overflow-x: auto;
  overflow-y: hidden;
}

.warehouse-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 14px;
  min-width: 520px;
  height: 250px;
  padding: 8px 10px 0;
  position: relative;
  box-sizing: border-box;
}

/* 单个仓库柱单元 */
.bar-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 68px;
  max-width: 140px;
  height: 100%;
  cursor: pointer;
  border-radius: 4px;
  outline: none;
  transition: transform 0.15s ease;
}

.bar-column:focus-visible {
  outline: 3px solid var(--color-control-border);
  outline-offset: 2px;
}

/* 柱顶数值 */
.bar-value-top {
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  text-align: center;
  white-space: nowrap;
  margin-bottom: 4px;
}

/* 柱体轨道与柱身 */
.bar-track {
  flex: 1 1 0;
  width: 100%;
  max-width: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  padding-bottom: 2px;
}

.bar-body {
  width: 100%;
  min-height: 3px;
  border-radius: 4px 4px 0 0;
  background: var(--color-bamboo); /* 基础色：竹青 #789262 */
  transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease;
}

/* 零值柱子标记 */
.bar-column.is-zero .bar-body {
  min-height: 2px;
  background: var(--color-border);
}

/* 悬停或键盘聚焦高亮：黛蓝 #425066 */
.bar-column:hover .bar-body,
.bar-column:focus-visible .bar-body {
  background: var(--color-dai-blue) !important;
}

.bar-column:hover,
.bar-column:focus-visible {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .bar-column,
  .bar-body {
    transition: none !important;
    transform: none !important;
  }
}

/* 柱底仓库名与辅助信息 */
.bar-meta {
  flex: 0 0 50px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.bar-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-aux {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  white-space: nowrap;
}

/* ==========================================================================
   主页可视化改造：最近业务记录 UI 一比一复制方案
   ========================================================================== */

.dashboard-activity-section {
  margin-bottom: 16px;
}

.dashboard-block-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 9px;
  padding: 0 2px;
}

.dashboard-block-heading h2 {
  margin: 0;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
}

.dashboard-block-heading p {
  margin: 4px 0 0;
  color: var(--color-text-secondary);
  font-size: 11px;
}

.dashboard-block-heading > span {
  color: var(--color-text-secondary);
  font-size: 11px;
  white-space: nowrap;
}

.dashboard-activity-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-activity-lane {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-surface);
}

.dashboard-activity-lane > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--color-border);
}

.dashboard-activity-lane h3 {
  margin: 0;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-activity-lane header span {
  display: block;
  margin-top: 3px;
  color: var(--color-text-secondary);
  font-size: 11px;
}

.dashboard-activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-rows: 4px;
  gap: 8px;
  align-items: start;
}

.dashboard-activity-card {
  align-self: start;
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--green-300);
  border-radius: 5px;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  box-sizing: border-box;
  outline: none;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background-color .16s ease;
}

.dashboard-activity-card.purchase {
  background: var(--trad-duck-egg);
}

.dashboard-activity-card.sales {
  background: var(--trad-moon-white);
}

.dashboard-activity-card-head,
.dashboard-activity-facts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-activity-kind {
  color: var(--trad-dai-blue);
  font-size: 11px;
  font-weight: 700;
}

.dashboard-activity-card > strong {
  display: block;
  margin-top: 9px;
  color: var(--trad-dai-blue);
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.dashboard-activity-products {
  display: block;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--green-300);
}

.dashboard-activity-products > small {
  display: block;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.dashboard-activity-product-list {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.dashboard-activity-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.dashboard-activity-product-copy {
  display: grid;
  gap: 2px;
}

.dashboard-activity-product-copy > span {
  min-width: 0;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.dashboard-activity-product-copy > small {
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.3;
}

.dashboard-activity-product > b {
  color: var(--trad-dai-blue);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard-activity-roll-total {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  color: var(--color-text-secondary);
  font-size: 11px;
}

.dashboard-activity-roll-total b {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.dashboard-activity-facts {
  align-items: flex-end;
  margin-top: 9px;
}

.dashboard-activity-facts span {
  min-width: 0;
}

.dashboard-activity-facts small {
  display: block;
  margin-bottom: 3px;
  color: var(--color-text-secondary);
  font-size: 11px;
}

.dashboard-activity-facts time,
.dashboard-activity-facts b {
  color: var(--color-text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.dashboard-activity-amount {
  text-align: right;
}

.dashboard-activity-open {
  display: block;
  margin-top: 10px;
  padding-top: 7px;
  border-top: 1px solid var(--green-300);
  color: var(--trad-dai-blue);
  font-size: 11px;
  font-weight: 700;
}

.dashboard-activity-card:hover {
  transform: translateY(-0.5px) scale(1.006);
  border-color: var(--green-600);
}

.dashboard-activity-card:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce), (hover: none) {
  .dashboard-activity-card:hover {
    transform: none;
  }
}

.dashboard-activity-empty {
  min-height: 116px;
  border: 1px dashed var(--green-300);
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--color-text-secondary);
  text-align: center;
}

@media (max-width: 980px) {
  .dashboard-activity-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .dashboard-activity-grid {
    grid-template-columns: 1fr;
  }
}

/* 基本信息：四组资料用固定低饱和色面建立清晰入口层级。 */
.base-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.base-info-grid .module-group {
  min-width: 0;
  min-height: 190px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: none;
}

.base-info-grid .module-group:nth-child(1) {
  background: var(--color-surface);
}

.base-info-grid .module-group:nth-child(2) {
  background: var(--color-duck-egg);
}

.base-info-grid .module-group:nth-child(3) {
  background: var(--color-moon-white);
}

.base-info-grid .module-group:nth-child(4) {
  background: var(--color-base);
}

.base-info-grid .module-group h3 {
  margin: 0;
  padding: 24px 24px 16px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 28px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0;
}

.base-info-grid .feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 16px 18px;
}

.base-info-grid .feature-list button {
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  overflow-wrap: anywhere;
}

.base-info-grid .feature-list button:hover {
  background: var(--color-selection);
  color: var(--color-text);
}

.base-info-grid .feature-list button:focus-visible {
  outline: 3px solid var(--color-action);
  outline-offset: 1px;
}

@media (max-width: 760px) {
  .base-info-grid {
    grid-template-columns: 1fr;
  }

  .base-info-grid .module-group {
    min-height: 0;
  }
}

@media (max-width: 460px) {
  .base-info-grid .module-group h3 {
    padding: 20px 20px 14px;
    font-size: 25px;
  }

  .base-info-grid .feature-list {
    grid-template-columns: 1fr;
    padding: 0 12px 14px;
  }
}

/* v2-complete.js 渲染的真实基本信息入口。 */
.finance-hub {
  background: #F1F3EF;
  color: var(--color-text, #203C23);
}
.finance-hub .expansion-intro { gap: 24px; flex-wrap: wrap; border-color: #AED5B2; }
.finance-hub .expansion-intro span,
.finance-hub .expansion-intro p,
.finance-hub .action-group header p,
.finance-hub .action-tile small { color: #5D665B; }
.finance-hub .action-group { background: #fff; border-color: #AED5B2; box-shadow: none; }
.finance-hub .action-group > header { background: #fff; border-color: #AED5B2; }
.finance-hub .finance-entry-grid { grid-template-columns: repeat(var(--finance-entry-count), minmax(0, 1fr)); }
.finance-hub .action-tile { min-height: 92px; border-color: #E0EEE8; border-bottom: 0; white-space: normal; }
.finance-hub .action-tile:last-child { border-right: 0; }
.finance-hub .action-tile:hover { background: #F4FAF5; }
.finance-hub .action-tile:focus-visible { outline: 2px solid #49794E; outline-offset: -3px; }
.finance-hub .action-tile > b { background: #49794E; color: #FFFBF0; }
.finance-hub .finance-tone-1 > b { background: #789262; }
.finance-hub .finance-tone-2 > b { background: #5A9660; }
.finance-hub .finance-tone-3 > b { background: #425066; }
.finance-hub .action-tile strong,
.finance-hub .action-tile small { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .finance-hub .finance-entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-hub .action-tile { border-bottom: 1px solid #E0EEE8; }
  .finance-hub .action-tile:nth-child(2n) { border-right: 0; }
}
@media (max-width: 580px) {
  .finance-hub .finance-entry-grid { grid-template-columns: minmax(0, 1fr); }
  .finance-hub .expansion-intro { gap: 12px; }
  .finance-hub .action-tile { border-right: 0; }
}

.base-info-menu {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.base-info-groups{padding:28px 24px 48px;background:#f1f3ef;min-height:100%;color:#203c23}.base-info-intro{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid #aed5b2;padding:0 2px 20px;margin-bottom:22px}.base-info-intro small{color:#789262}.base-info-intro h1{margin:6px 0 0;font-size:28px}.base-info-intro p{margin:0;color:#5d665b}.base-info-group{background:#fff;border:1px solid #c9e3cc;border-radius:12px;margin:0 0 18px;overflow:hidden}.base-info-group header{padding:18px 22px 14px;border-bottom:1px solid #d6e8d8}.base-info-group h2{margin:0;font-size:20px}.base-info-group header p{margin:5px 0 0;color:#5d665b;font-size:13px}.base-info-entries{display:flex;flex-wrap:wrap}.base-info-entry{flex:1 1 240px;min-height:94px;display:flex;align-items:center;gap:13px;padding:18px 20px;background:#fff;border:0;border-right:1px solid #e5eee5;text-align:left;color:#203c23;cursor:pointer}.base-info-entry:hover{background:#f4faf5}.base-info-entry b{display:block;font-size:15px}.base-info-entry small{display:block;margin-top:5px;color:#5d665b;font-size:12px}.base-info-entry em{margin-left:auto;font-size:25px;color:#8dbf92;font-style:normal}.base-info-icon{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:20px;font-weight:700;flex:none}.base-info-icon.i0{background:#49794e}.base-info-icon.i1{background:#789262}.base-info-icon.i2{background:#5a9660}.base-info-icon.i3{background:#425066}@media(max-width:700px){.base-info-groups{padding:18px 12px 32px}.base-info-intro{display:block}.base-info-intro p{margin-top:12px}.base-info-entry{flex-basis:100%;border-right:0;border-bottom:1px solid #e5eee5}}

.base-info-menu .complete-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  min-width: 0;
  min-height: 216px;
  padding: 0 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: none;
}

.base-info-menu .complete-card:nth-child(1) {
  background: var(--color-surface);
}

.base-info-menu .complete-card:nth-child(2) {
  background: var(--color-duck-egg);
}

.base-info-menu .complete-card:nth-child(3) {
  background: var(--color-moon-white);
}

.base-info-menu .complete-card:nth-child(4) {
  background: var(--color-base);
}

.base-info-menu .complete-card h3 {
  grid-column: 1 / -1;
  margin: 0;
  padding: 24px 8px 16px;
  color: var(--color-text);
  font-size: 28px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0;
}

.base-info-menu .complete-card button {
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  overflow-wrap: anywhere;
}

.base-info-menu .complete-card button:hover {
  background: var(--color-selection);
  color: var(--color-text);
}

.base-info-menu .complete-card button:focus-visible {
  outline: 3px solid var(--color-action);
  outline-offset: 1px;
}

@media (max-width: 760px) {
  .base-info-menu {
    grid-template-columns: 1fr;
  }

  .base-info-menu .complete-card {
    min-height: 0;
  }
}

@media (max-width: 460px) {
  .base-info-menu .complete-card {
    grid-template-columns: 1fr;
    padding: 0 12px 14px;
  }

  .base-info-menu .complete-card h3 {
    padding: 20px 8px 14px;
    font-size: 25px;
  }
}


/* Review overlay: preserve the original layout and all menu bindings. */
.traditional-icon-tile{display:inline-flex!important;align-items:center!important;justify-content:center!important;background:#789262!important;color:#fffbf0!important;flex-shrink:0!important}
.traditional-icon-tile .textile-glyph{width:32px!important;height:32px!important;display:block;flex:none}
.traditional-inline-icon{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;margin-right:8px;color:#425066;flex-shrink:0}
.traditional-inline-icon .textile-glyph{width:24px;height:24px;display:block}
#moduleNav .nav-icon .textile-glyph{width:24px;height:24px;display:block}

/* Form validation: the cell that blocked saving. Colour is paired with the toast text. */
.input-error,input.input-error,select.input-error{border-color:var(--red)!important;background:#fff6f6!important;box-shadow:0 0 0 2px rgba(189,59,59,.18)!important}

/* Narrow screens: document lists become cards (marked .list-cards by V2ListCards in v2.html).
   Line 1: 单号 | 金额. Line 2: 往来单位 | 状态. Remaining columns wrap as small label:value chips; actions last.
   Row search keeps working: filterTable() sets inline display:none, which beats the flex rule. */
@media (max-width: 760px) {
  .table-wrap:has(> table.list-cards){overflow-x:visible}
  table.list-cards,table.list-cards tbody{display:block;width:100%;min-width:0!important}
  table.list-cards thead{display:none}
  table.list-cards tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:10px 12px;margin:0 0 8px;border:1px solid var(--color-border,#AED5B2);border-radius:6px;background:#fff}
  table.list-cards tbody td{display:block;padding:0;border:0;text-align:left;white-space:normal;min-width:0}
  table.list-cards td[data-role=doc]{order:1;flex:1 1 60%;font-weight:600;word-break:break-all}
  table.list-cards td[data-role=amount]{order:2;margin-left:auto;text-align:right!important;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
  table.list-cards td[data-role=party]{order:3;flex:1 1 60%}
  table.list-cards td[data-role=status]{order:4;margin-left:auto;white-space:nowrap}
  table.list-cards td:not([data-role]){order:5;flex:0 1 auto;font-size:12px;text-align:left!important;color:var(--color-text-secondary,#345B38)}
  table.list-cards td:not([data-role])::before{content:attr(data-label) "：";color:#5c7a60}
  table.list-cards td[data-role=actions]{order:6;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px 14px;padding-top:6px;margin-top:2px;border-top:1px dashed #d4e6d6}
  table.list-cards td[data-role=actions] :is(button,a){min-height:32px;padding:4px 6px}
  table.list-cards td[colspan]{flex:1 1 100%;text-align:center}
}