/* ============================================================================
   ui-kit.css — MEG TradesPortal v8 新界面组件最小集（P5 · W0）
   ----------------------------------------------------------------------------
   说明：
     1. 全部组件类带 `ui-` 前缀，引用 assets/css/tokens.css 变量（不另行造值）。
     2. 不重定义 styles.css 既有类（.btn/.panel/.stage-card/.po-table/.chip/
        .status-badge 等一律不碰）；与旧类关系 = 对照而非覆盖。
     3. 克制纪律：无装饰渐变、无 emoji 业务装饰；卡片阴影只用 --shadow/--shadow-lg；
        hover 只做边框/底 + 轻微位移；:focus-visible 统一 var(--focus-ring)。
     4. 服务于 v8 新界面：看板竖向时间轴（§4）+ W3 选货。
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. 按钮族 ui-btn
   -------------------------------------------------------------------------- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 17px;
  font-size: var(--fs-14);
  font-weight: var(--fw-700);
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.ui-btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.ui-btn:disabled { cursor: not-allowed; }
.ui-btn-primary { background: var(--meg-green-600); color: var(--on-green-deep); }
.ui-btn-primary:hover:not(:disabled) { background: var(--meg-green-700); }
.ui-btn-primary:disabled { background: var(--green-disabled); color: var(--on-green-deep); }
.ui-btn-ghost { background: var(--meg-paper); color: var(--meg-ink); border-color: var(--meg-line); }
.ui-btn-ghost:hover:not(:disabled) { background: var(--ghost-hover); }
.ui-btn-ghost:disabled { background: var(--ghost-hover); color: var(--meg-muted); opacity: .7; }
.ui-btn-amber { background: var(--meg-sand); color: var(--on-sand); }
.ui-btn-amber:hover:not(:disabled) { background: var(--sand-hover); }
.ui-btn-sm { padding: 6px 12px; font-size: var(--fs-13); border-radius: var(--radius-8); }
.ui-btn-block { width: 100%; }

/* ----------------------------------------------------------------------------
   2. 表单族 ui-field / ui-label / ui-input / ui-select / ui-hint
   -------------------------------------------------------------------------- */
.ui-field { display: flex; flex-direction: column; gap: var(--space-6); }
.ui-label { font-size: var(--fs-13); font-weight: var(--fw-600); color: var(--meg-ink); }
.ui-input,
.ui-select {
  width: 100%;
  padding: 9px 12px;
  border: var(--border-w) solid var(--meg-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  font-family: inherit;
  background: var(--meg-paper-2);
  color: var(--meg-ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ui-input:focus,
.ui-select:focus { border-color: var(--meg-green-500); box-shadow: 0 0 0 3px var(--meg-green-100); }
.ui-input:disabled,
.ui-select:disabled { background: var(--meg-paper); color: var(--meg-muted); cursor: not-allowed; }
.ui-hint { font-size: var(--fs-12); color: var(--meg-muted); margin-top: var(--space-2); }

/* ----------------------------------------------------------------------------
   3. 容器 ui-card / ui-panel
   -------------------------------------------------------------------------- */
.ui-card {
  background: var(--meg-paper-2);
  border: var(--border-w) solid var(--meg-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.ui-panel {
  background: var(--meg-paper-2);
  border: var(--border-w) solid var(--meg-line);
  border-radius: var(--radius);
}

/* ----------------------------------------------------------------------------
   4. 表格 ui-table（+ ui-th / ui-row-hover / ui-col-*）
   -------------------------------------------------------------------------- */
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.ui-table th {
  text-align: left;
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--meg-muted);
  padding: var(--space-8) var(--space-10);
  border-bottom: var(--border-w-2) solid var(--meg-line);
  white-space: nowrap;
}
.ui-table td { padding: 9px var(--space-10); border-bottom: var(--border-w) solid var(--meg-paper); vertical-align: top; }
.ui-row-hover tbody tr:hover { background: var(--meg-paper); }
.ui-col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-col-fit { white-space: nowrap; }

/* ----------------------------------------------------------------------------
   5. 徽章 ui-badge（8 态：live/preview/draft/preparing/done/doing/todo/hist）
   -------------------------------------------------------------------------- */
.ui-badge {
  display: inline-flex; align-items: center; gap: var(--space-4);
  font-size: var(--fs-11);
  font-weight: var(--fw-700);
  line-height: 1;
  letter-spacing: .02em;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  border: var(--border-w) solid transparent;
  white-space: nowrap;
}
.ui-badge-live     { background: var(--meg-green-100); color: var(--meg-green-900); border-color: var(--meg-green-300); }
.ui-badge-preview  { background: var(--meg-sand);      color: var(--on-sand); }
.ui-badge-draft    { background: var(--meg-paper);     color: var(--meg-muted);  border-color: var(--meg-line); }
.ui-badge-preparing{ background: var(--meg-paper);     color: var(--meg-muted);  border-color: var(--meg-line); border-style: dashed; }
.ui-badge-done     { background: var(--done-grad-a);   color: var(--done-ink);   border-color: var(--done-line); }
.ui-badge-doing    { background: var(--meg-amber-soft);color: var(--on-amber);   border-color: var(--amber-border); }
.ui-badge-todo     { background: var(--meg-paper);     color: var(--meg-muted);  border-color: var(--meg-line); }
.ui-badge-hist     { background: var(--meg-paper);     color: var(--meg-muted);  border-color: var(--meg-line); font-style: italic; }

/* ----------------------------------------------------------------------------
   6. 空态 ui-empty
   -------------------------------------------------------------------------- */
.ui-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-10);
  text-align: center;
  border: var(--border-w) dashed var(--meg-line);
  border-radius: var(--radius);
  background: var(--meg-paper-2);
  padding: 56px 20px;
}
.ui-empty-ico {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: var(--meg-paper);
  color: var(--meg-muted);
}
.ui-empty-title { font-size: var(--fs-17); font-weight: var(--fw-800); color: var(--meg-ink); }
.ui-empty-sub { font-size: var(--fs-13); color: var(--meg-muted); max-width: 440px; line-height: var(--lh-text); }

/* ----------------------------------------------------------------------------
   7. 轻量标签 ui-chip
   -------------------------------------------------------------------------- */
.ui-chip {
  display: inline-flex; align-items: center; gap: var(--space-4);
  font-size: var(--fs-11);
  font-weight: var(--fw-700);
  line-height: 1.2;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--meg-line);
  background: var(--meg-paper);
  color: var(--meg-ink);
  white-space: nowrap;
}
.ui-chip-navy { background: var(--meg-navy); border-color: var(--meg-navy); color: var(--on-green-deep); }

/* ----------------------------------------------------------------------------
   8. 进度 ui-progress / ui-progress-fill
   -------------------------------------------------------------------------- */
.ui-progress { height: 5px; border-radius: var(--radius-pill); background: var(--meg-paper); overflow: hidden; }
.ui-progress-fill { height: 100%; border-radius: var(--radius-pill); background: var(--meg-green-500); transition: width .3s; }
.ui-progress-fill.done { background: var(--meg-green-600); }
.ui-progress-fill.doing { background: var(--meg-sand); }

/* ----------------------------------------------------------------------------
   9. 「筹备中」占位 ui-placeholder（v8 空/占位语义统一视觉）
   -------------------------------------------------------------------------- */
.ui-placeholder {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-8);
  width: 100%;
  min-height: 46px;
  border: var(--border-w) dashed var(--meg-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--meg-muted);
  font-size: var(--fs-13);
  padding: var(--space-10) var(--space-12);
  text-align: center;
}
.ui-placeholder--error {
  border-color: var(--red-line);
  color: var(--on-red);
  background: var(--red-out-bg);
}

/* ============================================================================
   10. 看板专用 · 竖向时间轴（v8 主区）
   ========================================================================== */
.ui-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}

/* ---- 阶段行：左 rail（节点）+ 右主区 ---- */
.ui-stage-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-14);
  align-items: start;
}
/* 竖向连接细线（自节点下缘至下一阶段行顶部） */
.ui-stage-row::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 46px;
  bottom: calc(-1 * var(--space-14));
  width: 2px;
  background: var(--meg-line);
}
.ui-stage-row:last-child::before { display: none; }

/* ---- 时间轴节点（序号圆角方块：done 绿 / doing 沙 / todo 灰；preorder 藏青） ---- */
.ui-timeline-node {
  width: 40px; height: 40px;
  border-radius: var(--radius-10);
  display: flex; align-items: center; justify-content: center;
  background: var(--meg-paper);
  border: var(--border-w) solid var(--meg-line);
  color: var(--meg-muted);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.ui-stage-no { font-size: var(--fs-13); font-weight: var(--fw-800); line-height: 1; }
.ui-stage-row.done .ui-timeline-node { background: var(--meg-green-600); border-color: var(--meg-green-600); color: var(--on-green-deep); }
.ui-stage-row.doing .ui-timeline-node { background: var(--meg-sand); border-color: var(--meg-sand); color: var(--on-sand); }
.ui-stage-row.todo .ui-timeline-node { background: var(--meg-paper); border-color: var(--meg-line); color: var(--meg-muted); }
.ui-stage-row.preorder .ui-timeline-node { background: var(--meg-navy); border-color: var(--meg-navy); color: var(--on-green-deep); }

/* ---- 阶段主区 ---- */
.ui-stage-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }

/* ---- 阶段头：整行可点（展开/折叠） ---- */
.ui-stage-head {
  display: flex; align-items: center; gap: var(--space-10);
  flex-wrap: wrap;
  width: 100%;
  min-height: 40px;
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  padding: var(--space-4) var(--space-8);
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ui-stage-head:hover { background: var(--ghost-hover); border-color: var(--meg-line); }
.ui-stage-head:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.ui-stage-name { font-size: var(--fs-15); font-weight: var(--fw-800); color: var(--meg-ink); }
.ui-stage-count { font-size: var(--fs-12); color: var(--meg-muted); white-space: nowrap; }
.ui-stage-arrow {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  color: var(--meg-muted);
  transition: transform .15s;
  flex-shrink: 0;
}
.ui-stage-head[aria-expanded="false"] .ui-stage-arrow { transform: rotate(-90deg); }

/* ---- 阶段展开体：场景行列表（默认 1 列；≥1200 双列可用区） ---- */
.ui-stage-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}
.ui-stage-head[aria-expanded="false"] + .ui-stage-group { display: none; }

/* ---- 场景行 ---- */
.ui-sc-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  border: var(--border-w) solid var(--meg-line);
  border-radius: var(--radius-sm);
  background: var(--meg-paper-2);
  padding: var(--space-8) var(--space-10);
  color: inherit;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ui-sc-name {
  flex: 1 1 160px;
  min-width: 0;
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
  color: var(--meg-ink);
}
.ui-sc-orders { font-size: var(--fs-12); color: var(--meg-muted); white-space: nowrap; }
.ui-sc-actions { display: inline-flex; align-items: center; gap: var(--space-8); justify-content: flex-end; }
.ui-sc-amount {
  display: none;
  font-size: var(--fs-13);
  font-weight: var(--fw-800);
  color: var(--meg-green-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ui-sc-row.open .ui-sc-amount { display: inline-block; }
.ui-sc-row:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* live 场景行：可点（跳转示意），hover 轻反馈 */
.ui-sc-row.is-live { cursor: pointer; }
.ui-sc-row.is-live:hover { border-color: var(--meg-green-500); background: var(--meg-paper); }

/* 就绪占位标签（draft/preview/error 场景） */
.ui-placeholder-tag {
  font-size: var(--fs-12);
  font-weight: var(--fw-700);
  color: var(--meg-muted);
  border: var(--border-w) dashed var(--meg-line);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  white-space: nowrap;
}

/* draft / preview / error 场景：一律「筹备中」虚线占位 —— 不可点、无金额、无单数 */
.ui-sc-row.is-draft,
.ui-sc-row.is-preview,
.ui-sc-row.is-error { cursor: default; border-style: dashed; background: transparent; }
.ui-sc-row.is-draft:hover,
.ui-sc-row.is-preview:hover,
.ui-sc-row.is-error:hover { border-color: var(--meg-line); background: transparent; }
.ui-sc-row.is-draft .ui-sc-name,
.ui-sc-row.is-preview .ui-sc-name { color: var(--meg-muted); }
.ui-sc-row.is-error .ui-placeholder-tag,
.ui-sc-row.is-error .ui-sc-name { color: var(--on-red); }
.ui-sc-row.is-error .ui-placeholder-tag { border-color: var(--red-line); background: var(--red-out-bg); }

/* ---- 历史阶段 PO 行（只读快照） ---- */
.ui-hist-row {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  border: var(--border-w) dashed var(--meg-line);
  border-radius: var(--radius-sm);
  background: var(--meg-paper);
  color: var(--meg-muted);
  padding: var(--space-8) var(--space-10);
  font-size: var(--fs-13);
}
.ui-hist-name { flex: 1 1 160px; min-width: 0; font-style: italic; font-weight: var(--fw-700); color: var(--meg-muted); }
.ui-hist-po { font-size: var(--fs-12); }
.ui-hist-orders { font-size: var(--fs-12); white-space: nowrap; }
.ui-hist-amount { font-style: italic; font-weight: var(--fw-700); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================================
   11. 工具类
   ========================================================================== */
.ui-mt-4 { margin-top: var(--space-4); }
.ui-mt-8 { margin-top: var(--space-8); }
.ui-mt-12 { margin-top: var(--space-12); }
.ui-mt-20 { margin-top: var(--space-20); }
.ui-gap-8 { gap: var(--space-8); }
.ui-gap-12 { gap: var(--space-12); }
.ui-gap-16 { gap: var(--space-16); }
.ui-muted { color: var(--meg-muted); }
.ui-hidden { display: none !important; }

/* ============================================================================
   12. 响应式（按架构稿 §4.4）
       ≥1200   场景 2 列（双列可用区）
       900–1199 场景单列
       <860    rail 压缩：节点收窄为 4px 细线带小节点、字号降档
       <560    阶段行纵向堆叠、金额按钮全宽
   ========================================================================== */
@media (min-width: 1200px) {
  .ui-stage-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .ui-stage-row { grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-10); }
  .ui-stage-row::before { left: 8px; top: 24px; bottom: calc(-1 * var(--space-10)); }
  .ui-timeline-node { width: 18px; height: 18px; border-radius: var(--radius-xs); }
  .ui-stage-no { font-size: var(--fs-10); }
  .ui-stage-head { gap: var(--space-8); padding: var(--space-2) var(--space-4); min-height: 0; }
  .ui-stage-name { font-size: var(--fs-14); }
  .ui-stage-count { font-size: var(--fs-11); }
  .ui-sc-row { padding: var(--space-6) var(--space-8); }
  .ui-sc-name { font-size: var(--fs-13); }
}

@media (max-width: 560px) {
  .ui-timeline { gap: var(--space-12); }
  .ui-stage-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .ui-stage-row::before { display: none; }
  .ui-timeline-node { width: 28px; height: 28px; border-radius: var(--radius-8); }
  .ui-stage-no { font-size: var(--fs-12); }
  .ui-stage-head { padding-left: var(--space-2); }
  .ui-sc-row { flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .ui-sc-actions { justify-content: stretch; }
  .ui-sc-actions .ui-btn { width: 100%; }
  .ui-sc-amount { text-align: right; }
}