/* ============================================================================
   sell-mobile.css —— 库存出售（登记出售）页
   版式参考线上 App「库存出售」页截图，另外补了三处参考图里没有、但这个系统需要的：
     · 本次登记的**合计条**（出售金额 / 采购成本 / 支出 / 预计利润）常驻在提交栏上方，
       不用滚到底才知道这一单赚多少
     · 多规格货号的规格切换条（参考图那个货号只有 41 一个规格）
     · 出售平台与出售时间（对账与时间范围统计都依赖这两项）
   颜色沿用采购移动端那套变量（--pm-*），保证两个模块看起来是同一个 App。
   移动优先：窄屏是单列 + 两条吸底；宽屏另写一段（见文件末尾「宽屏形态」），
   把「货号信息」与「本次登记」拆成左右两栏 —— 560px 的竖排在桌面上太浪费，
   一屏只看得到两件，而逐件登记恰恰是件数多的时候最需要横向空间。
   ============================================================================ */

.sm {
  /* ⚠ 这里**不再重复定义** --pm-* 那一套：它们在 purchase-mobile.css 的
     `:root` 上统一定义（含深色覆盖）。重复定义会把这个作用域又钉死回浅色值，
     深色主题下 `.sm` 范围里的弹层照样是白的 —— 之前就是这么漏的。
     只在 .sm 上加自己独有的两个语义色。 */
  --sm-pos: #0a9e5c;
  --sm-neg: #e34d59;
  background: var(--pm-bg);
  min-height: 100%;
  /* 给两条吸底让位，否则最后一张卡片会被合计条盖住。
     不用「合计条 + 提交栏」的总高（约 123px）：提交栏是浮层，
     末尾留 92px 已经能看到全部内容，再多只是白白多一屏空白。 */
  padding-bottom: 92px;
}

/* 这两个语义色也要跟着主题走：深色底上的正/负利润用原色会太扎眼、
   对比度也不够。 */
:root[data-theme='dark'] .sm {
  --sm-pos: #3ddc97;
  --sm-neg: #ff7a85;
}

/* 窄屏下两栏只是普通的上下堆叠，与单列版式完全一致 */
.sm-body { display: block; }
.sm-sums { display: none; }   /* 窄屏用吸底那条合计，侧栏那条不显示 */

@media (min-width: 769px) {
  .sm { max-width: 560px; margin: 0 auto; box-shadow: 0 0 0 1px var(--pm-line); }
}
/* 宽屏（≥1024px）改用两栏，见文件末尾「宽屏形态」——
   .sm 的最大宽度在那里被覆盖成 1180px，这里的 560px 只对平板生效。 */

/* ---------- 顶部标题栏 ---------- */
.sm-topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 4px;
  height: 48px; padding: 0 6px;
  background: var(--pm-surface);
  border-bottom: 1px solid var(--pm-line);
}
.sm-topbar__back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 auto;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--pm-text); cursor: pointer;
}
.sm-topbar__back:active { background: var(--pm-bg); }
.sm-topbar__title { flex: 1 1 auto; margin: 0; font-size: 17px; font-weight: 600; text-align: center; padding-right: 36px; }

/* ---------- 货号卡片 ---------- */
.sm-goods {
  display: flex; align-items: center; gap: 12px;
  margin: 12px; padding: 12px;
  background: var(--pm-surface); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(31, 35, 41, .06);
}
.sm-goods__mid { flex: 1 1 auto; min-width: 0; }
.sm-goods__name {
  font-size: 15px; font-weight: 600; color: var(--pm-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sm-goods__spec {
  margin-top: 4px;
  font-size: 12px; color: var(--pm-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sm-goods__avail {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 58px; padding: 8px 10px;
  background: var(--pm-tint); border-radius: 10px;
}
.sm-goods__avail strong { font-size: 20px; line-height: 1.1; color: var(--pm-primary); font-variant-numeric: tabular-nums; }
.sm-goods__avail span { margin-top: 2px; font-size: 12px; color: var(--pm-primary); }

/* ---------- 规格切换条（多规格货号才有） ---------- */
.sm-specbar { display: flex; gap: 8px; padding: 0 12px 12px; overflow-x: auto; }
.sm-specbar__btn {
  flex: 0 0 auto;
  height: 32px; padding: 0 14px;
  border: 1px solid var(--pm-line); border-radius: 16px;
  background: var(--pm-surface); color: var(--pm-text-2); font-size: 13px; cursor: pointer;
}
.sm-specbar__btn.is-active { border-color: var(--pm-primary); color: var(--pm-primary); font-weight: 600; background: var(--pm-tint); }

/* ---------- 区块 ---------- */
.sm-block {
  margin: 0 12px 12px;
  padding: 14px;
  background: var(--pm-surface); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(31, 35, 41, .06);
}
.sm-block__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 12px; }
.sm-block__title { font-size: 15px; font-weight: 600; color: var(--pm-text); }
.sm-block__hint { font-size: 12px; color: var(--pm-text-3); }
.sm-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--pm-text-3); }

/* ---------- 一行「标签 + 金额输入」 ---------- */
.sm-row { display: flex; align-items: center; gap: 12px; }
.sm-row + .sm-row { margin-top: 12px; }
.sm-row__label { flex: 0 0 auto; width: 96px; font-size: 14px; color: var(--pm-text-2); }
.sm-money {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 12px;
  border: 1px solid var(--pm-line); border-radius: 8px; background: var(--pm-surface);
}
.sm-money:focus-within { border-color: var(--pm-primary); }
.sm-money__sym { flex: 0 0 auto; color: var(--pm-text-3); font-size: 15px; }
/* 输入框本身去掉边框与内边距：外层的 .sm-money 就是它的可视边框，
   否则会出现「框里还有一个框」 */
.sm-money input,
.sm-money .input {
  flex: 1 1 auto; min-width: 0;
  height: 100%; border: 0; outline: none; padding: 0;
  font-size: 15px; color: var(--pm-text); background: transparent;
}
.sm-money input::placeholder { color: var(--pm-text-3); }

/* ---------- 逐件登记 ---------- */
.sm-items { display: flex; flex-direction: column; gap: 12px; }
.sm-item { padding: 12px; border: 1px solid var(--pm-line); border-radius: 10px; background: var(--pm-surface); }
.sm-item__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sm-item__no { font-size: 13px; font-weight: 600; color: var(--pm-text); }
.sm-item__code { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--pm-text-3); }
.sm-item__del {
  flex: 0 0 auto;
  border: 0; background: transparent; padding: 4px 2px;
  font-size: 13px; color: var(--sm-neg); cursor: pointer;
}
/* 采购成本：来自 FIFO 成本层的只读信息，做成一条强调带，别让它看起来可编辑 */
.sm-cost {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding: 9px 12px;
  background: var(--pm-warn-bg);
  border: 1px solid var(--pm-warn-bd); border-radius: 8px;
  font-size: 13px; color: var(--pm-warn-fg);
}
.sm-cost strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.sm-field { display: flex; align-items: center; gap: 8px; }
.sm-field + .sm-field { margin-top: 10px; }
.sm-field .sm-field { margin-top: 0; }
.sm-field__label { flex: 0 0 auto; width: 132px; font-size: 14px; color: var(--pm-text-2); }
.sm-field__req { flex: 0 0 auto; margin-left: -4px; color: var(--sm-neg); font-size: 14px; }
.sm-item__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--pm-line);
  font-size: 13px; color: var(--pm-text-2);
}
.sm-item__foot strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.sm-item__foot .is-pos { color: var(--sm-pos); }
.sm-item__foot .is-neg { color: var(--sm-neg); }

/* ---------- 再出售一件 ---------- */
.sm-more {
  display: block; width: 100%; height: 44px; margin-top: 12px;
  border: 1px dashed var(--pm-primary); border-radius: 10px;
  background: var(--pm-tint); color: var(--pm-primary);
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.sm-more:active { background: var(--pm-badge-blue); }
.sm-more.is-disabled { border-color: var(--pm-line); background: var(--pm-bg); color: var(--pm-text-3); }

/* ---------- 吸底合计 ---------- */
.sm-total {
  position: fixed; left: 0; right: 0; bottom: 58px; z-index: 6;
  padding: 10px 12px;
  background: var(--pm-surface);
  border-top: 1px solid var(--pm-line);
  box-shadow: 0 -2px 8px rgba(31, 35, 41, .06);
}
.sm-total__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.sm-total__cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sm-total__cell span { font-size: 11px; color: var(--pm-text-3); }
.sm-total__cell strong { font-size: 14px; color: var(--pm-text); font-variant-numeric: tabular-nums; }
.sm-total__cell.is-profit strong { font-size: 16px; }
.sm-total__cell .is-pos { color: var(--sm-pos); }
.sm-total__cell .is-neg { color: var(--sm-neg); }

/* ---------- 吸底提交 ---------- */
.sm-footbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 7;
  display: flex; gap: 10px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--pm-surface);
  border-top: 1px solid var(--pm-line);
}
.sm-btn {
  flex: 1 1 0; height: 44px;
  border: 0; border-radius: 22px;
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.sm-btn--primary { background: var(--pm-primary); color: #fff; }
.sm-btn--primary:active { background: var(--pm-primary-deep); }
.sm-btn--ghost { flex: 0 0 96px; background: var(--pm-bg); color: var(--pm-text-2); }

/* 平板区间（769–1023px）：仍是单列手机版式，只把两条吸底限宽居中，
   否则它们会横贯整个窗口。≥1024px 由下面的宽屏段改成普通流卡片。 */
@media (min-width: 769px) and (max-width: 1023px) {
  .sm-total, .sm-footbar { left: 50%; right: auto; transform: translateX(-50%); width: 560px; }
}

/* ---------- 空态 ---------- */
.sm-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 60px 12px; padding: 36px 20px;
  background: var(--pm-surface); border-radius: 12px;
  text-align: center; color: var(--pm-text-3);
}
.sm-empty__title { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--pm-text); }
.sm-empty__sub { margin: 0 0 10px; font-size: 13px; line-height: 1.6; }

/* 窄屏：把两条吸底抬到**全局常驻底栏**（shell 的 .dock，58px）之上。
   ⚠ 这些覆盖只写在本模块自己的样式表里，不污染 layout.css。 */
@media (max-width: 768px) {
  .sm { padding-bottom: 168px; }   /* 92 + 58(底栏) + 安全余量 */
  .sm-footbar { bottom: 58px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .sm-total { bottom: 116px; }     /* 58(底栏) + 58(提交栏) */
}

/* ============================================================================
   宽屏形态（≥ 1024px）
   560px 的竖排在桌面上很浪费：一屏只看得到两件，而逐件登记恰恰是
   件数多的时候最需要横向空间。这里排成左右两栏：
     左栏 = 这个货号本身（货号卡 + 规格切换 + 预计出售与回款）
     右栏 = 本次登记（件列表 + 出售信息 + 合计与提交）
   两栏都拆成 grid 子项，件列表自然撑高，右栏件数多也不会把左栏的
   吸顶卡片顶得很难看。

   两个固定浮层在宽屏下都不要了，改成**普通流**里的卡片：
     · 提交栏 → 右栏「本次合计」卡片里的两个按钮
     · 合计条 → 同一张卡片里的四格
   原因是宽屏下栏高动辄上千像素，吸底会盖住正文，而合计本来就该贴着提交按钮。
   ============================================================================ */
@media (min-width: 1024px) {
  .sm {
    max-width: 1180px;
    margin: 0 auto;
    box-shadow: none;
    background: transparent;
    padding-bottom: 24px;   /* 没有吸底了，不用留位 */
  }
  /* 宽屏不需要返回箭头（左侧导航里有「出售管理」，面包屑也在） */
  .sm-topbar { background: transparent; border-bottom: 0; height: 44px; padding-left: 0; }
  .sm-topbar__back { display: none; }
  .sm-topbar__title { text-align: left; padding-right: 0; font-size: 18px; }

  /* 两栏：左栏固定 380px（货号信息不需要更宽），右栏吃掉剩余空间 */
  .sm-body {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
  }
  .sm-col { min-width: 0; }

  /* 左栏跟着滚：货号卡与定价口径在填写过程中要一直看得到。
     不给整栏 sticky（栏可能比视口高，粘住反而看不到底部），
     只让「货号卡片」这一张粘住。 */
  .sm-col--goods .sm-goods { position: sticky; top: 12px; z-index: 2; }

  /* 卡片间距在宽屏统一交给 grid 的 gap，去掉左右外边距 */
  .sm-body .sm-block,
  .sm-body .sm-goods,
  .sm-body .sm-specbar { margin-left: 0; margin-right: 0; }
  .sm-body .sm-specbar { padding-left: 0; }

  /* 件卡片在宽屏排两列：一件一行会拉得很长，两列填得更满。
     minmax(0,1fr) 防止长货号把列撑破。 */
  .sm-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* 件数是奇数时最后一张跨两列，避免右下角空一块 */
  .sm-items > .sm-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* 输入行在宽屏把标签列收窄一点，输入框能更长，数字好核对 */
  .sm-field__label { width: 118px; }
  .sm-body .sm-row__label { width: 84px; }

  /* 吸底两件套在宽屏让位给右栏那张卡片 */
  .sm-total, .sm-footbar { display: none; }
  .sm-sums { display: block; position: sticky; bottom: 0; }

  /* 合计卡片：四格横排（宽屏空间够），底部两个按钮 */
  .sm-sums .sm-block { margin: 0; }
  .sm-total__row--side { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
  .sm-total__row--side .sm-total__cell { flex: 1 1 0; }
  .sm-total__row--side .sm-total__cell strong { font-size: 16px; }
  .sm-total__row--side .sm-total__cell.is-profit strong { font-size: 18px; }
  .sm-sums__ops { display: flex; gap: 10px; margin-top: 14px; }
  .sm-sums__ops .sm-btn { height: 42px; border-radius: 8px; font-size: 15px; }
  .sm-sums__ops .sm-btn--ghost { flex: 0 0 110px; border: 1px solid var(--pm-line); background: var(--pm-surface); }
}

/* 超宽屏：件卡片排三列，并把左栏略微加宽 */
@media (min-width: 1440px) {
  .sm-body { grid-template-columns: 420px minmax(0, 1fr); }
  .sm-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 三列时「最后一张跨列」这条规则会留下奇怪的断口，超宽屏取消它 */
  .sm-items > .sm-item:last-child:nth-child(odd) { grid-column: auto; }
}