/* office.ajuncctv.com · 样式
   ⭐ 调性：清爽的仓库仪表盘 —— 大数字 + 语义色当灵魂 + 亮/暗双主题 ✓
   ⚠️ 出库用**琥珀**、不用红 ✗（红只留给真错误 ✓）
   ⚠️ 数字一律 tabular-nums —— 列对齐、切主题不跳动 ✓ */

:root {
  --brand:      #4A9DE0;
  --in:         #58B77E;   /* 入库 · 柔绿 ✓ */
  --out:        #FFB74D;   /* 出库 · 琥珀 ✓ */
  --danger:     #D9534F;
  --grad:       linear-gradient(170deg, #FFFBF2 0%, #F3F9FF 55%, #EEF6FF 100%);
  --card:       #FFFFFF;
  --card-soft:  rgba(255, 255, 255, .86);
  --ink:        #38414D;
  --ink-soft:   #7B8794;
  --line:       #EAF0F6;
  --hover:      #F7FBFF;
  --chip:       #F1F7FD;
  --shadow:     0 6px 20px rgba(74, 157, 224, .10);
  --r:          16px;
}

[data-theme="dark"] {
  --brand:      #5AAEEF;
  --in:         #63C58A;
  --out:        #FFC266;
  --danger:     #E2736E;
  --grad:       linear-gradient(170deg, #131C28 0%, #0F1620 60%, #0C121A 100%);
  --card:       #182230;
  --card-soft:  rgba(24, 34, 48, .92);
  --ink:        #E6EDF5;
  --ink-soft:   #93A2B4;
  --line:       #25313F;
  --hover:      #1E2A38;
  --chip:       #1F2B3A;
  --shadow:     0 6px 22px rgba(0, 0, 0, .38);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  color: var(--ink);
  background: var(--grad);
  background-attachment: fixed;
  font: 15px/1.6 -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  min-height: 100vh;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------- 顶栏 ---------------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--card-soft); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1400px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700;
         color: var(--ink); letter-spacing: .3px; white-space: nowrap; }
.brand:hover { text-decoration: none; }
/* ⚠️ 图本身已经切好圆角（tools/gen_logo.py 出的）—— 这里别再叠 border-radius ✗
   尺寸就按 PNG 里的成品比例给：26px 在顶栏里正好，再大就把导航挤到了 ✓ */
.brand-logo { display: block; flex: 0 0 auto; width: 26px; height: 26px; }
.dot { color: var(--out); }
.nav { display: flex; gap: 4px; flex: 1; }
.navlink { padding: 5px 12px; border-radius: 999px; color: var(--ink-soft); font-size: 14px; }
.navlink:hover { background: var(--hover); text-decoration: none; }
.navlink.on { background: var(--brand); color: #fff; }
.top-right { display: flex; align-items: center; gap: 10px; }
.who { font-size: 13px; color: var(--ink-soft); }
.icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--card);
            color: var(--ink); cursor: pointer; font-size: 15px; line-height: 1; }
.icon-btn:hover { background: var(--hover); }

/* ⭐ 清单是 9 列 + 操作列 5 个按钮 ≈ 要 1200px 才不挤 —— 所以放宽到 1400px ✓
   ⚠️ 改这里要连同下面那个断点一起想：视口比表格窄时，靠断点降级成卡片，别硬挤 ✗ */
.wrap { max-width: 1400px; margin: 0 auto; padding: 18px 16px 72px; }
.page-sub { font-size: 13px; color: var(--ink-soft); margin: -4px 0 12px; }

.flash { background: var(--chip); border: 1px solid var(--line); border-left: 3px solid var(--brand);
         border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }

.sec-h { font-size: 15px; font-weight: 700; margin: 22px 0 10px; color: var(--ink); }

/* ---------------- 卡片 ---------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.card + .card { margin-top: 14px; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px;
          padding: 13px 16px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 15px; }
.card-b { padding: 14px 16px; }

/* ---------------- 语义配色卡：一眼分清"这张卡在干什么" ✓ ----------------
   ⭐ 只给**弹出的功能卡**上色（新增 / 改物料 → 蓝；记一笔入库 → 绿；记一笔出库 → 琥珀），
      主清单保持素净，不跟着花 ✓
   ⚠️ 色值一律用 color-mix 从主题变量**现算**，不硬编 rgba —— 硬编的老毛病是深色主题下
      那层淡底会发灰发脏，而 color-mix 会跟着 --card / --ink 一起翻面 ✓
   ⚠️ 浏览器不支持 color-mix 时这几条声明整条作废、卡片退回原样，不会花屏 ✓ */
.card.t-in  { --tint: var(--in); }
.card.t-out { --tint: var(--out); }
.card.t-add { --tint: var(--brand); }
.card.t-in, .card.t-out, .card.t-add {
  border-color: color-mix(in srgb, var(--tint) 38%, var(--line));
  background-image: linear-gradient(180deg,
                    color-mix(in srgb, var(--tint) 12%, var(--card)) 0,
                    var(--card) 108px);
}
.card.t-in > .card-h, .card.t-out > .card-h, .card.t-add > .card-h {
  color: color-mix(in srgb, var(--tint) 72%, var(--ink));
  border-bottom-color: color-mix(in srgb, var(--tint) 26%, var(--line));
}

/* ---------------- 大数（⭐ 第一眼就靠它 ✓） ---------------- */
.stats { display: grid; grid-template-columns: 200px 200px 1fr; gap: 14px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
        box-shadow: var(--shadow); padding: 16px 18px; }
.stat .num-big { font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -.5px;
                 font-variant-numeric: tabular-nums; }
.stat .unit { font-size: 14px; font-weight: 400; color: var(--ink-soft); margin-left: 4px; }
.stat .lbl { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* ---------------- 最近动态 ---------------- */
.feed { padding: 8px 16px 12px; }
.stat .feed { padding: 4px 0 0; }
.feed-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.feed-row:last-child { border-bottom: 0; }
.feed-row .t { color: var(--ink-soft); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.feed-row .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { display: inline-block; min-width: 34px; text-align: center; padding: 1px 7px; border-radius: 999px;
       font-size: 12px; font-weight: 700; color: #fff; }
.tag.in  { background: var(--in); }
.tag.out { background: var(--out); color: #573d00; }
.qty-in  { color: var(--in); font-weight: 700; font-variant-numeric: tabular-nums; }
.qty-out { color: var(--out); font-weight: 700; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-soft); }

/* ---------------- 工具条 ---------------- */
.toolbar { display: flex; gap: 10px; align-items: center; margin: 18px 0 10px; }
.search { flex: 1; max-width: 340px; position: relative; }
.search input { width: 100%; }
.q-count { font-size: 12px; color: var(--ink-soft); }
.spacer { flex: 1; }

/* ---------------- 表格 ---------------- */
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-soft);
                padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.grid td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid tbody tr:hover { background: var(--hover); }
table.grid tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: right; }
td.c { text-align: center; }
.c-name { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.c-name .model { font-weight: 400; color: var(--ink-soft); font-size: 12px; }

/* 结存迷你条（⭐ 低成本高光点 ✓） */
.mini { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; min-width: 56px; margin-top: 5px; }
.mini > i { display: block; height: 100%; background: linear-gradient(90deg, var(--in), var(--brand)); }
.bal { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bal.zero { color: var(--ink-soft); font-weight: 400; }

/* 名称：name 原样（⚠️ 不做识别、不拆分类 ✗）—— 就用个卡片把它框出来 ✓ */
.name-card { display: inline-block; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
             background: var(--chip); font-weight: 600; font-size: 13.5px; }

/* 行内展开三角 */
.exp { flex: 0 0 auto; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px;
       background: var(--chip); color: var(--ink-soft); cursor: pointer; font-size: 11px; line-height: 1;
       font-family: inherit; }
.exp::before { content: '▾'; }
.exp:hover { background: var(--hover); color: var(--ink); }
tr.main.folded .exp::before { content: '▸'; }

/* ---------------- 翻页条 ---------------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
         padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.pg { min-width: 32px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
      background: var(--card); color: var(--ink-soft); font-size: 13px; text-align: center;
      font-variant-numeric: tabular-nums; }
a.pg:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.pg.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.pg.off { opacity: .45; }
.pg.gap { border: 0; background: none; min-width: 12px; padding: 5px 2px; }
.pg-info { margin-left: auto; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------------- 页签（有库存 / 无库存 / 全部） ---------------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px 4px; }
.tab { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card);
       color: var(--ink-soft); font-size: 13px; }
.tab:hover { background: var(--hover); text-decoration: none; }
.tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.tab b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------- 行内子格子：这件的出入流水（⭐ 列照 xlsx / 财务的习惯 ✓） ----------------
   ⚠️ 一行一笔流水：入库填**左半**、出库填**右半**，另一半空着 —— 和 xlsx 一个长相 ✓
   ⚠️ 桌面端空单元格**必须留着** ✗（撑住列对齐）；只有窄屏降级时才隐藏 ✓ */
tr.sub > td.sub-cell { padding: 10px 14px 12px 30px; background: var(--chip); }
table.grid tbody tr.sub:hover { background: var(--chip); }
.sub-none { font-size: 13px; color: var(--ink-soft); }

/* ⭐ 行内快捷记出入库的表单行：按方向配淡底色（和上面那颗 in/out tag 呼应 ✓）
   ⚠️ 必须写在 `tr.sub > td.sub-cell` 之后 —— 优先级一样，靠"后来者胜"压住 ✓ */
tr.q-in  > td.sub-cell { background: color-mix(in srgb, var(--in)  13%, var(--chip)); }
tr.q-out > td.sub-cell { background: color-mix(in srgb, var(--out) 17%, var(--chip)); }

/* ⚠️ 子表是**嵌套**在 table.grid 里的 —— 所有规则都带 `table.grid .flow` 前缀 ✗✓，
   不然会被上面 `table.grid td { padding:11px 12px; border-bottom:solid }` 压住、整个变形 ✓ */
table.grid .flow { width: 100%; border-collapse: collapse; font-size: 12.5px; }
/* ⚠️ vertical-align: bottom —— rowspan 的「日期 / 结存 / 备注 / 对应合同」默认**垂直居中**，
      会悬在两行表头中间、和上下两行都不挨着（看着就是"没对齐"✗）；贴底后和第二行
      （票号 / 数量 / 单价 / 金额 …）同一条基线，第一行只剩「入库 / 出库」两个组标题 ✓ */
table.grid .flow th { padding: 4px 8px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
                      text-align: left; white-space: nowrap; vertical-align: bottom;
                      border-bottom: 1px solid var(--line); }
table.grid .flow th.r { text-align: right; }
table.grid .flow th.f-in  { color: var(--in); }
table.grid .flow th.f-out { color: var(--out); }
table.grid .flow td { padding: 5px 8px; vertical-align: top; border-bottom: 1px dashed var(--line); }
table.grid .flow tr:last-child td { border-bottom: 0; }
table.grid .flow td.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.grid .flow td.f-date { color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.grid .flow td.f-note { color: var(--ink-soft); }
table.grid tbody .flow tr:hover { background: none; }   /* 别让外层 tbody hover 串到子表 ✓ */
/* 只在**有值**的那半边染一点色 —— 一眼看出这行是入库还是出库 ✓ */
table.grid .flow td.ci:not(:empty) { background: rgba(88, 183, 126, .07); }
table.grid .flow td.co:not(:empty) { background: rgba(255, 183, 77, .09); }

/* 票号（多个时省略，完整值在 title 里 ✓） */
.tk { display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis;
      white-space: nowrap; vertical-align: bottom; font-variant-numeric: tabular-nums; }

/* ---------------- 按钮 ---------------- */
.btn { display: inline-block; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--line);
       background: var(--card); color: var(--ink); font-size: 14px; cursor: pointer; line-height: 1.5;
       font-family: inherit; }
.btn:hover { background: var(--hover); text-decoration: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { color: var(--danger); border-color: var(--line); }
.btn.danger:hover { background: rgba(217, 83, 79, .08); }
.btn.tiny, .ghost.tiny { padding: 3px 9px; font-size: 12.5px; border-radius: 8px; }
/* 行内快捷记出入库的两个小按钮（⭐ 跟时间线 tag / qty 同一套色 ✓） */
.btn.tiny.in  { color: var(--in);  border-color: var(--in); }
.btn.tiny.out { color: var(--out); border-color: var(--out); }
.btn.tiny.in:hover  { background: rgba(88, 183, 126, .10); }
.btn.tiny.out:hover { background: rgba(255, 183, 77, .14); }
.ghost { display: inline-block; padding: 7px 12px; border: 1px solid transparent; border-radius: 10px;
         background: none; color: var(--ink-soft); font-size: 14px; line-height: 1.5; cursor: pointer; }
.ghost:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* ⚠️ nowrap 不是"好看"，是**兜住这一列的最小宽度** ✗✓：
   实测五颗按钮一条 224px —— nowrap 让「操作」列的 min-content 就等于它，
   主表怎么分列都挤不着（wrap 时 1180px 视口只剩 179px → 折成两行、这行白高 ✗）✓
   ⚠️ 窄屏不用管：≤1100px 整张表会降级成卡片（实测 1120px 已是卡片），按钮照样一行 ✓ */
.row-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
button.link { background: none; border: 0; padding: 0; color: var(--brand); cursor: pointer;
              font: inherit; text-decoration: underline; }

/* ---------------- 表单 ---------------- */
.field { display: flex; flex-direction: column; gap: 4px; }
.field > label { font-size: 12px; color: var(--ink-soft); }
input[type=text], input[type=password], input[type=date], input[type=number], select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  color: var(--ink); font: inherit; font-size: 14px; width: 100%;
}
input:focus, select:focus { outline: 2px solid rgba(74, 157, 224, .35); outline-offset: 1px; border-color: var(--brand); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.form-stack { display: grid; gap: 12px; max-width: 420px; }   /* 竖排表单（改密码用 ✓） */
.form-acts { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.hint { font-size: 12px; color: var(--ink-soft); }
/* 行内快捷表单的小标题：tag + 物料名 + 提示 ✓ */
.q-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
[hidden] { display: none !important; }

/* ---------------- 详情：出入流水（双向时间线 ✓） ---------------- */
.detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.detail-title { font-size: 20px; font-weight: 700; }
.detail-title .model { font-size: 13px; font-weight: 400; color: var(--ink-soft); margin-left: 8px; }
.detail-title .name-card { font-size: 17px; }   /* 详情页标题得显眼一点 ✓ */
.bal-big { text-align: right; }
.bal-big .n { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.bal-big .l { font-size: 12px; color: var(--ink-soft); }

.tl { position: relative; margin: 4px 0 0; padding: 0 0 0 18px; list-style: none; }
.tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl > li { position: relative; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.tl > li:last-child { border-bottom: 0; }
.tl > li::before { content: ''; position: absolute; left: -17px; top: 15px; width: 10px; height: 10px;
                   border-radius: 50%; background: var(--in); box-shadow: 0 0 0 3px var(--card); }
.tl > li.is-out::before { background: var(--out); }
.tl-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tl-d { font-size: 12.5px; color: var(--ink-soft); min-width: 84px; font-variant-numeric: tabular-nums; }
.tl-q { font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-meta { font-size: 12.5px; color: var(--ink-soft); }
.tl-bal { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tl-mine { font-size: 12.5px; }
.tl-mine form { display: inline; }

/* ---------------- 统计小卡（详情页头部） ---------------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chipx { background: var(--chip); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }

/* ---------------- 登录页 ---------------- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.login-card { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--line);
              border-radius: 20px; box-shadow: var(--shadow); padding: 26px 24px; }
.login-card h1 { font-size: 20px; margin: 0 0 2px; }
.login-logo { display: block; width: 44px; height: 44px; margin-bottom: 10px; }
.login-card .sub { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 18px; }
.login-card .field { margin-bottom: 12px; }
.login-card .btn { width: 100%; padding: 10px; font-size: 15px; }
.cap-row { display: flex; gap: 10px; align-items: stretch; }
.cap-row input { flex: 1; }
.cap-row img { height: 40px; width: 120px; border: 1px solid var(--line); border-radius: 10px;
               cursor: pointer; background: #F3F9FF; }
.err { background: rgba(217, 83, 79, .10); border: 1px solid rgba(217, 83, 79, .35); color: var(--danger);
       border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 14px; }

/* ---------------- 空状态 ---------------- */
.empty { text-align: center; color: var(--ink-soft); padding: 30px 10px; font-size: 14px; }
.empty .big { font-size: 30px; }

/* ---------------- 手机 / 窄窗口：表格转卡片 ✓ ----------------
   ⚠️ 断点从 840 提到 1100：这张表现在要 ~1200px 才不挤，
      视口比它窄就别硬塞九列（会挤成一团 + 按钮换行），直接降级成卡片更好读 ✓ */
@media (max-width: 1100px) {
  .top-in { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .wrap { padding: 14px 12px 64px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats .stat.feed-card { grid-column: 1 / -1; }
  .stat .num-big { font-size: 30px; }
  .toolbar { flex-wrap: wrap; }
  .search { max-width: none; }
  table.grid thead { display: none; }
  table.grid, table.grid tbody, table.grid tr, table.grid td { display: block; width: 100%; }
  table.grid tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; padding: 10px 12px; }
  table.grid tr:hover { background: var(--card); }
  table.grid td { border: 0; padding: 3px 0; display: flex; align-items: center;
                  justify-content: space-between; gap: 12px; text-align: right; }
  table.grid td::before { content: attr(data-label); color: var(--ink-soft); font-size: 12px;
                          flex: 0 0 auto; text-align: left; }
  table.grid td.c-name { justify-content: flex-start; }
  table.grid td.c-name::before { content: none; }
  table.grid td.c-name + td { margin-top: 4px; }
  table.grid td.c-acts { justify-content: flex-end; margin-top: 6px; }
  .row-acts { justify-content: flex-start; }
  /* 子格子（出入流水）：贴着主行卡片下面，别当成第二张卡 ✓ */
  table.grid tr.sub { margin: -6px 0 12px; padding: 8px 12px; border-radius: 12px; background: var(--chip); }
  table.grid tr.sub:hover { background: var(--chip); }
  table.grid td.sub-cell { display: block; padding: 0; }
  table.grid td.sub-cell::before { content: none; }

  /* 小流水表降级：10 列塞不下 → 一笔一块、靠 data-label 认列 ✓ */
  table.grid .flow thead { display: none; }
  table.grid .flow, table.grid .flow tbody, table.grid .flow tr, table.grid .flow td { display: block; width: 100%; }
  table.grid .flow tr { margin: 0; padding: 7px 0; border: 0; border-bottom: 1px dashed var(--line); border-radius: 0; }
  table.grid .flow tr:last-child { border-bottom: 0; }
  table.grid .flow td { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
                        padding: 2px 0; border: 0; text-align: right; }
  table.grid .flow td::before { content: attr(data-label); flex: 0 0 auto; text-align: left;
                                color: var(--ink-soft); font-size: 12px; }
  table.grid .flow td:empty { display: none; }   /* ⚠️ 只有窄屏才能藏空格子 ✓（桌面靠它撑列） */
  table.grid .flow td.f-date { justify-content: flex-start; font-weight: 600; }
  table.grid .flow td.f-date::before { content: none; }
  table.grid .flow td.ci:not(:empty), table.grid .flow td.co:not(:empty) { background: none; }
  .detail-head { flex-direction: column; align-items: flex-start; }
  .bal-big { text-align: left; }
  .tl { padding-left: 16px; }
  .login-card { max-width: none; }
}

/* ---------------- 子表列宽对齐主表（⚠️ 只在 ≥1101px 生效 —— 窄屏是卡片，用不上 ✓） ----------------
   ⭐ 主表 9 列、子表 10 列，两张表各自 auto 布局 → 列宽互不相干，
      「出库 / 结存」必然上下错开（页面越宽错得越多 ✗）
      → app.js 量出主表每列的实际宽度，按同一套边界给子表填 <colgroup>、把表宽塞进 --fw ✓
   ⚠️ 主表的列宽是**内容算出来的**（名称 / 型号 / 票号长短都算在内），所以写死百分比没用 ✗ */
@media (min-width: 1101px) {
  /* ⚠️ 宽度必须用 calc(100% + 44px)：子表要比 .sub-cell 的**内容盒**宽出它的左右内边距（30 + 14），
      这样子表的左右边界才和主表重合；写死 px 会反过来把主表撑大（量一次涨一次 ✗）✓
     ⚠️ contain: inline-size 不能省：子表是 colspan=9 单元格里的**嵌套表**，它的内容宽度会参与
        主表列宽的分配 —— 不给它上 containment，主表就会被它拖着走，「操作」列被挤窄、
        五颗按钮换行 ✗（这正是踩过的坑 ✓） */
  table.grid .flow.synced { table-layout: fixed; width: calc(100% + 44px); margin-left: -30px;
                            contain: inline-size; }
  /* padding 和主表一致（12px）—— 右对齐的数字才能和上面主行**同一条竖线** ✓ */
  table.grid .flow.synced th, table.grid .flow.synced td { padding-left: 12px; padding-right: 12px; }
  /* 第一列让出主行那颗 ▾ 的宽度，日期和物料名左端对齐 ✓ */
  table.grid .flow.synced th.f-date, table.grid .flow.synced td.f-date { padding-left: 38px; }
}