/* ==========================================================================
项目运营记录系统 · 界面设计系统
层级：设计令牌 → 基础层 → 控件层 → 布局 → 组件 → 响应式
========================================================================== */
/* --------------------------------------------------------------------------
1. 设计令牌
-------------------------------------------------------------------------- */
:root{
/* 品牌色阶（取自公司 logo 蓝） */
--brand-900:#0B2033;
--brand-800:#0F2C48;
--brand-700:#144878;
--brand-600:#1A5FA8;
--brand-500:#2E7BC8;
--brand-400:#5A9FDE;
--brand-200:#BCD8F0;
--brand-100:#E8F1FA;
--brand-50:#F5FAFD;
/* 中性色 */
--bg:#EEF1F5;
--surface:#FFFFFF;
--surface-2:#F7F9FC;
--border:#DBE1E9;
--border-2:#EAEEF4;
--line:#E9EDF3;
/* 文字三级层次 */
--t1:#1A2130;
--t2:#556074;
--t3:#919EAE;
/* 语义色 */
--red:#BC3A2D; --red-bg:#FCEDEB; --red-line:#F0C6C0;
--green:#0D7656; --green-bg:#E2F5ED;
--amber:#8F6110; --amber-bg:#FCF1DE;
/* 侧边栏（中蓝 · 保留品牌感，降低压迫感） */
--sb-bg:linear-gradient(180deg,#22629F 0%,#1C5489 52%,#164471 100%);
--sb-text:#D3E3F2;
--sb-dim:#A8C2DA;
--sb-hover:rgba(255,255,255,.12);
--sb-active:rgba(255,255,255,.20);
--sb-line:rgba(255,255,255,.16);
/* 尺寸与节奏 */
--sb-w:236px;
--h-ctl:34px;
--r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px;
/* 阴影 */
--sh-1:0 1px 2px rgba(13,32,52,.05);
--sh-2:0 1px 2px rgba(13,32,52,.04), 0 2px 8px rgba(13,32,52,.05);
--sh-3:0 18px 50px rgba(13,32,52,.22);
/* 字号阶梯（收敛为 7 档） */
--fs-xs:11px;
--fs-sm:12px;
--fs-base:13px;
--fs-md:14px;
--fs-lg:16px;
--fs-xl:18px;
--fs-2xl:24px;
--font-mono:ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
}
/* --------------------------------------------------------------------------
2. 基础层
-------------------------------------------------------------------------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
font-size:var(--fs-md);
line-height:1.5;
color:var(--t1);
background:var(--bg);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{ line-height:1.35; font-weight:600; }
/* --------------------------------------------------------------------------
3. 控件层（统一 34px 高）
-------------------------------------------------------------------------- */
button{
font-family:inherit; font-size:var(--fs-base); font-weight:500;
height:var(--h-ctl); padding:0 15px; border:none; border-radius:var(--r-md);
cursor:pointer; white-space:nowrap;
transition:background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .08s ease;
}
button:active{ transform:translateY(1px); }
button:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; }
.btn{ background:var(--brand-600); color:#fff; box-shadow:0 1px 2px rgba(26,95,168,.22); }
.btn:hover{ background:var(--brand-700); }
.btn-ghost{ background:var(--surface); color:var(--brand-600); border:1px solid var(--border); }
.btn-ghost:hover{ background:var(--brand-50); border-color:var(--brand-200); color:var(--brand-700); }
.btn-danger{ background:var(--surface); color:var(--red); border:1px solid var(--red-line); }
.btn-danger:hover{ background:var(--red-bg); }
.btn-export{ background:var(--surface); color:var(--green); border:1px solid #BEE1D4; }
.btn-export:hover{ background:var(--green-bg); border-color:#9FD3C0; }
.btn-mini{ height:28px; padding:0 11px; font-size:var(--fs-sm); border-radius:var(--r-sm); }
input,select,textarea{
font-family:inherit; font-size:var(--fs-base); color:var(--t1);
height:var(--h-ctl); padding:0 11px;
border:1px solid var(--border); border-radius:var(--r-md);
background:var(--surface);
transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{ height:auto; padding:8px 11px; line-height:1.55; resize:vertical; }
input:hover,select:hover,textarea:hover{ border-color:#C6CEDA; }
input:focus,select:focus,textarea:focus{
outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(46,123,200,.14);
}
input::placeholder{ color:var(--t3); }
input[type="date"]{ width:136px; color:var(--t2); }
/* v0.10.15（Y先生 2026-09-21）：空日期框的占位符是**浏览器自带**的 —— 中文环境下印成
「yyyy/mm/日」（年、月是英文，日却是中文；Chromium 在 zh-CN 下的老毛病）。
它在 UA shadow DOM 里，CSS 改不了文案 ⇒ 空且未聚焦时把这段字涂透明，
只留右边的日历图标（点图标照样弹日历）。一有值 / 一聚焦立刻恢复原生显示。
⚠ 只切一个 class、不动 DOM 结构 —— 明细行是 grid，包一层会打乱列宽（技能 §8.1）。
判据见 ui_check_live.py「[9]」段；开关见 index.html 的 datePHAll()。 */
input[type="date"].d-empty::-webkit-datetime-edit{ color:transparent; }
input[type="file"]{ height:auto; padding:9px 11px; font-size:var(--fs-sm); background:var(--surface-2); }
select{
padding-right:30px; appearance:none; cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 4.6 6 7.8l3.2-3.2' fill='none' stroke='%23919EAE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 10px center;
}
label{ display:block; font-size:var(--fs-sm); font-weight:500; color:var(--t2); margin:12px 0 5px; }
label .req{ color:var(--red); margin-left:2px; }
/* --------------------------------------------------------------------------
4. 登录页
-------------------------------------------------------------------------- */
#loginView{
display:none; min-height:100vh; align-items:center; justify-content:center;
/* 留出上下内边距：1280×720 这类矮屏上卡片不会被 flex 居中裁掉顶部 */
padding:32px 16px;
background-color:var(--brand-800);
background-image:
radial-gradient(760px 420px at 16% 10%, rgba(46,123,200,.32), transparent 62%),
radial-gradient(640px 380px at 86% 90%, rgba(26,95,168,.28), transparent 60%),
linear-gradient(150deg,#0E2942 0%,#123356 48%,#0B2136 100%);
}
#loginView.show{ display:flex; }
.login-card{
/* 原先固定 372px，窗口窄于 400px 时会被裁 → 取视口与设计宽度的较小值 */
width:min(404px, calc(100vw - 32px));
padding:38px 44px 28px;
background:var(--surface); border-radius:var(--r-xl);
box-shadow:0 24px 70px rgba(4,16,30,.42);
}
.login-logo{ display:block; width:100%; max-width:238px; height:auto; margin:0 auto 22px; }
.login-card h1{ font-size:var(--fs-xl); font-weight:600; text-align:center; letter-spacing:.4px; margin-bottom:8px; }
.login-card .sub{ text-align:center; color:var(--t3); font-size:var(--fs-base); margin-bottom:26px; }
/* 输入区：标签与控件比全局控件层更宽松一档，形成清晰的「两组」节奏 */
.login-form label{ display:block; font-size:var(--fs-base); font-weight:500; color:var(--t2); margin:18px 0 8px; }
.login-form label:first-child{ margin-top:0; }
/* 用户名 / 口令：高度 34 → 48px（+41%），字号 +1 档，圆角更圆 —— 单手在触屏上也好点 */
.login-form input{
width:100%; height:48px; padding:0 15px;
font-size:var(--fs-md); border-radius:var(--r-lg);
}
/* 浏览器自动填充的底色会盖掉白底；用 inset 阴影压平。
必须排在 :focus 之前 —— 同权重下后面的 :focus 才能把蓝环盖回来 */
.login-form input:-webkit-autofill{
-webkit-text-fill-color:var(--t1);
-webkit-box-shadow:0 0 0 60px var(--surface) inset;
}
.login-form input:focus{
outline:none; border-color:var(--brand-500);
box-shadow:0 0 0 3px rgba(46,123,200,.14);
}
.login-form input::placeholder{ color:var(--t3); }
.login-form .btn{
width:100%; height:48px; margin-top:18px;
font-size:var(--fs-lg); font-weight:600; letter-spacing:.5px;
border-radius:var(--r-lg);
}
.login-err{ color:var(--red); font-size:var(--fs-sm); text-align:center; margin-top:8px; min-height:16px; }
.tip{ text-align:center; font-size:var(--fs-sm); color:var(--t3); margin-top:20px; padding-top:16px; border-top:1px solid var(--border-2); }
/* --------------------------------------------------------------------------
5. 主框架 · 左侧边栏（深色）
-------------------------------------------------------------------------- */
#appView{ display:none; }
#appView.show{ display:flex; align-items:stretch; min-height:100vh; }
.sidebar{
position:fixed; inset:0 auto 0 0; z-index:30;
width:var(--sb-w); flex:0 0 var(--sb-w);
display:flex; flex-direction:column; overflow-y:auto;
background:var(--sb-bg);
box-shadow:1px 0 0 rgba(8,32,58,.10);
}
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.28); border-radius:6px; border:none; }
.sidebar::-webkit-scrollbar-track{ background:transparent; }
/* 品牌区 */
.side-brand{ padding:18px 16px; border-bottom:1px solid var(--sb-line); }
.side-logo-box{ padding:11px 14px; background:#fff; border-radius:var(--r-lg); box-shadow:0 4px 14px rgba(4,22,44,.16); }
.side-logo{ display:block; width:100%; height:auto; }
.sys-name{
margin-top:14px; padding:11px 13px 12px;
border-radius:var(--r-lg);
background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.20);
}
.sys-name .t1{ font-size:var(--fs-lg); font-weight:600; color:#fff; letter-spacing:.4px; line-height:1.3; }
.sys-name .t2{
display:flex; align-items:center; gap:7px; margin-top:7px;
font-size:var(--fs-sm); font-weight:500; color:#C3DCF3; letter-spacing:1px;
}
.sys-name .t2::before{
content:''; width:5px; height:5px; border-radius:50%; flex:0 0 5px;
background:#CFE6FA; box-shadow:0 0 0 3px rgba(207,230,250,.22);
}
/* 一级导航（纵向） */
.nav{ flex:1; display:flex; flex-direction:column; gap:4px; padding:12px; }
.nav-item{
position:relative; display:flex; align-items:center; gap:11px;
height:44px; padding:0 13px; border-radius:var(--r-md);
color:var(--sb-text); font-size:var(--fs-md); font-weight:400;
cursor:pointer; transition:background .16s ease, color .16s ease;
}
.nav-item svg{
width:18px; height:18px; flex:0 0 18px; opacity:.9;
stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.nav-item:hover{ background:var(--sb-hover); color:#EAF2FA; }
.nav-item.active{ background:var(--sb-active); color:#fff; font-weight:600; }
.nav-item.active svg{ opacity:1; }
.nav-item.active::before{
content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
width:3px; height:22px; border-radius:0 3px 3px 0; background:#BCD8F0;
}
/* 侧栏底部 */
.side-foot{ padding:14px 16px 16px; border-top:1px solid var(--sb-line); }
.side-foot .who{ font-size:var(--fs-sm); color:var(--sb-dim); margin-bottom:10px; }
.side-foot .who b{ font-size:var(--fs-base); font-weight:600; color:#fff; }
.side-foot .row{ display:flex; gap:8px; }
.side-foot .row button{ flex:1; }
.sidebar .btn-ghost{ background:rgba(255,255,255,.12); color:#DCEAF6; border-color:rgba(255,255,255,.22); }
.sidebar .btn-ghost:hover{ background:rgba(255,255,255,.24); color:#fff; border-color:rgba(255,255,255,.34); }
/* --------------------------------------------------------------------------
6. 右侧内容区
-------------------------------------------------------------------------- */
.main{ flex:1; min-width:0; margin-left:var(--sb-w); display:flex; flex-direction:column; }
/* 顶部固定：项目部切换条 */
.projbar{
position:sticky; top:0; z-index:20; height:66px;
display:flex; align-items:center; gap:18px; padding:0 28px;
background:rgba(255,255,255,.92);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
box-shadow:0 1px 3px rgba(13,32,52,.04);
}
.projbar .pb-label{ font-size:var(--fs-base); font-weight:500; color:var(--t2); letter-spacing:.6px; white-space:nowrap; }
.projbar .pb-group{ display:flex; gap:5px; padding:5px; border-radius:11px; background:#ECF0F5; }
.projbar .pb-item{
display:flex; align-items:center; height:38px; padding:0 24px; border-radius:8px;
font-size:var(--fs-xl); font-weight:600; letter-spacing:.5px;
color:#46536A; cursor:pointer; white-space:nowrap;
transition:background .16s ease, color .16s ease, box-shadow .16s ease;
}
.projbar .pb-item:hover{ color:var(--brand-600); }
.projbar .pb-item.active{
background:var(--brand-600); color:#fff; font-weight:600;
box-shadow:0 2px 8px rgba(26,95,168,.30);
}
.projbar .pb-hint{ margin-left:auto; font-size:var(--fs-base); color:var(--t3); white-space:nowrap; }
/* 页面容器 */
.page{ display:none; padding:22px 28px 36px; animation:fadeUp .22s ease; }
.page.show{ display:block; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.page-head{ margin-bottom:18px; }
.page-head h2{ font-size:var(--fs-xl); color:var(--t1); letter-spacing:.2px; }
.page-head p, .page-foot p{ font-size:var(--fs-sm); color:var(--t3); margin-top:5px; }
/* 页脚说明（v0.11.19 · Y先生 2026-09-24）：库存总览的页面标题已删，「本页说明」整段落到表格下方。
🟥 样式与 `.page-head` **同源** —— 两处选择器一律成组写，别只改页头那半支。 */
.page-foot{ margin-top:18px; margin-bottom:0; }
.page-foot p{ margin-top:0; }
/* 页头 / 页脚里的操作提示胶囊（如"双击任意行即可编辑"） */
.page-head .dbl-hint, .page-foot .dbl-hint{
display:inline-block; vertical-align:1px; margin-left:10px;
padding:2px 9px; border-radius:11px;
font-size:var(--fs-xs); color:var(--brand-700); letter-spacing:.2px;
background:var(--brand-100); border:1px solid var(--brand-200);
}
/* 子页签（分段控件） */
.subtabs{
display:inline-flex; gap:3px; padding:3px; margin-bottom:16px;
border-radius:10px; background:#E7EBF1;
}
.subtab{
display:flex; align-items:center; height:32px; padding:0 20px; border-radius:8px;
font-size:var(--fs-base); font-weight:500; color:var(--t2);
cursor:pointer; transition:background .16s ease, color .16s ease, box-shadow .16s ease;
}
.subtab:hover{ color:var(--brand-600); }
.subtab.active{
background:var(--surface); color:var(--brand-700); font-weight:600;
box-shadow:0 1px 3px rgba(13,32,52,.12);
}
.subblock{ display:none; }
.subblock.show{ display:block; }
/* --------------------------------------------------------------------------
7. 卡片 / 工具栏 / 指标卡
-------------------------------------------------------------------------- */
.card{
background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-lg);
padding:18px 20px 20px; margin-bottom:16px; box-shadow:var(--sh-2);
}
.toolbar{
display:flex; flex-wrap:wrap; gap:9px; align-items:center;
margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border-2);
}
.toolbar .grow{ flex:1; }
.toolbar .lbl, .toolbar .fl{ font-size:var(--fs-sm); color:var(--t2); white-space:nowrap; }
/* 汇总指标条：一组一张白卡，组内指标用发丝线分隔，每格可点
层次 = 分组标题 11 / 指标名 12 / 指标值 18 / 主指标 24（均在字号令牌内）
配色 = 中性为主，预警「有数才红」，主指标品牌浅底，命中筛选的格子高亮 */
.kpis{ display:flex; flex-wrap:wrap; align-items:stretch; gap:14px; margin-bottom:16px; }
.kpi-sec{
display:flex; flex:0 1 auto; flex-direction:column; gap:6px; min-width:0;
background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r-lg);
padding:10px 5px; box-shadow:var(--sh-2);
}
.kpi-cap{
display:flex; align-items:center; gap:8px; line-height:1.1;
padding:0 15px; font-size:var(--fs-xs); color:var(--t3); letter-spacing:.06em;
}
/* 分组字幕承担「分区色彩身份」：结存/流水用品牌蓝，预警有数才转红 */
.kpi-cap.t-brand{ color:var(--brand-600); }
.kpi-cap.t-alert{ color:var(--red); }
.kpi-row{ display:flex; align-items:stretch; flex:1; }
/* 指标格（本体是 button，键盘可聚焦、可回车） */
.kpi{
position:relative; flex:1 1 auto; min-width:0; height:auto; padding:5px 15px;
display:flex; flex-direction:column; justify-content:flex-end; gap:3px;
border:0; border-radius:var(--r-sm); background:none; text-align:left;
font-family:inherit; white-space:normal; transition:background .15s ease, box-shadow .15s ease;
}
.kpi + .kpi::before{
content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:var(--line);
}
.kpi:hover{ background:var(--brand-50); }
.kpi:focus-visible{ outline:2px solid var(--brand-400); outline-offset:-2px; }
.kpi .v{
font-size:var(--fs-xl); font-weight:600; color:var(--t1); line-height:1.05;
letter-spacing:-.3px; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.kpi .k{
display:flex; align-items:center; font-size:var(--fs-sm); color:var(--t3);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 可点的格子给一个右向箭头，只在悬停时出现，静态时保持干净 */
.kpi[data-act] .k::after, .kpi[data-page] .k::after{
content:'›'; margin-left:3px; color:var(--brand-500); opacity:0; transition:opacity .15s ease;
}
.kpi[data-act]:hover .k::after, .kpi[data-page]:hover .k::after{ opacity:1; }
/* 主指标：全条唯一用 24px 的数，品牌浅底托底 */
.kpi.hero{ background:var(--brand-50); }
.kpi.hero .v{ font-size:var(--fs-2xl); color:var(--brand-800); }
.kpi.hero:hover{ background:var(--brand-100); }
/* 预警态：只有非 0 才着色，全 0 时保持中性，避免「狼来了」 */
.kpi.alarm{ background:var(--red-bg); }
.kpi.alarm .v, .kpi.alarm .k{ color:var(--red); }
.kpi.alarm:hover{ box-shadow:inset 0 0 0 1px var(--red-line); }
.kpi.alarm .k::after{ color:var(--red); }
/* 当前筛选命中的那一格 */
.kpi.is-on{ background:var(--brand-100); }
.kpi.is-on:hover{ box-shadow:inset 0 0 0 1px var(--brand-400); }
.kpi.is-on .k{ color:var(--brand-700); font-weight:600; }
.kpi.is-on::after{
content:''; position:absolute; left:12px; right:12px; bottom:-4px;
height:2px; border-radius:2px; background:var(--brand-600);
}
/* 工具条上的「命中 N / 共 M 种」—— 指标条已固定为**全量口径**，筛选命中数改在这里体现；
无筛选时为空串，靠 :empty 收起，不占位、不抖动 */
.hit{ font-size:var(--fs-xs); color:var(--brand-700); font-variant-numeric:tabular-nums;
white-space:nowrap; }
.hit:empty{ display:none; }
/* 点击「仓结存 / 合计结存」时闪一下表格对应列 */
@keyframes colFlash{ 0%{ background:var(--brand-200); } 100%{ background:transparent; } }
.col-flash{ animation:colFlash 1.25s ease-out; }
@media (max-width:1180px){
.kpis{ gap:12px; }
.kpi-sec{ flex:1 1 100%; }
}
/* --------------------------------------------------------------------------
8. 表格
-------------------------------------------------------------------------- */
table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); }
th,td{ padding:11px 12px; text-align:center; font-size:var(--fs-base); white-space:nowrap; }
th{
position:sticky; top:0; z-index:1;
font-size:var(--fs-sm); font-weight:600; color:var(--t2); letter-spacing:.2px;
background:var(--surface-2); border-bottom:1px solid var(--border);
}
/* 表头列分隔线（Y先生 2026-09-18：标题字段要有边框线，让人直接看到列边界）。
用 inset 阴影而不是 border —— 表格布局里 border 会**参与列宽计算**（13 列就是多出 12px），
inset 阴影完全不参与布局，所以「表宽恒等于容器宽」这条口径不受影响。
操作列表头自带 box-shadow（sticky 分隔阴影），优先级更高，不需要也没法重复叠加。 */
table.grid thead th + th{ box-shadow:inset 1px 0 0 var(--border); }
td{ color:var(--t1); border-bottom:1px solid var(--line); }
tbody tr:nth-child(even) td{ background:#FAFBFD; }
tbody tr:hover td{ background:var(--brand-50); }
tbody tr:last-child td{ border-bottom:none; }
/* 数字列：全表居中后不再单独右对齐，只保留等宽数字（列内数码对齐仍更整齐） */
th.num, td.num{ font-variant-numeric:tabular-nums; }
/* 密集表（列多，如材料字典 13 列）：横向内边距收紧到 8px，纵向 9px。
实测（_shots/pad_before.txt，1600/1440/1280 三档）：横向内边距每减 1px，表宽减 20px
—— 13 列里 10 列由内容宽决定，名称/规格/备注 3 列被声明 min-width 钉住不跟随。
故 12→10 只省 40px（1440 下仍超 28px），取 8px 才够 -80px，1440 视口不再横向滚动。
2026-09-18 二次调列宽（_shots/col_before.txt）：备注 120→200（Y先生指定）、操作 118→96 且
按钮收小到 24px 高；同时把虚高的声明贴合内容（名称 140→90、规格 150→120）—— 后者是**纯增益**：
声明低于内容宽时 min-content 仍会把列撑开，不会截断任何文字。 */
table.dense th, table.dense td{ padding:9px 8px; }
/* 密集表内的操作按钮同步收小（2026-09-18：备注列加宽到 200px，宽度由操作列让出）*/
table.dense td.actions .btn-mini{ height:24px; padding:0 5px; font-size:var(--fs-xs); }
/* 相邻按钮贴成一个「按钮组」：相邻边框重叠 1px（否则两条边框并排显得脏），
同时把按钮之间那个空白字符占掉的 ~4px 还给相邻列。
2026-09-18 第四次收窄后字典页行内只剩「编辑」一个按钮，这条规则暂时用不上，**保留** ——
将来若再放第二个行内按钮（或别的 dense 表需要），不用回想当初为什么省掉这 4px。 */
table.dense td.actions .btn-mini + .btn-mini{ margin-left:-1px; }
tbody tr.warn-row td{ background:var(--red-bg); }
tbody tr.warn-row:hover td{ background:#F8E3E0; }
tbody tr.warn-row td:first-child{ box-shadow:inset 3px 0 0 var(--red); }
/* v0.10.1：单据详情「合计」行（tfoot）—— 明细末行本来没有下边框（见 tbody tr:last-child），
所以这条 border-top 就是唯一的分隔线；底色比斑马纹再深一档，让合计「沉」在表格最下面。
注意 tbody 的斑马纹/悬停规则都带 tbody 前缀，不会误伤 tfoot。 */
tfoot tr.sumrow td{ background:#F1F5FA; font-weight:600; border-top:1px solid var(--border); }
tfoot tr.sumrow td:first-child{ color:var(--t2); }
/* --------------------------------------------------------------------------
8.1 表格列宽：不横向滚动 + 操作列固定右侧 + 列宽可拖（2026-09-18 Y先生定）
--------------------------------------------------------------------------
三条口径（配套实现见 static/index.html 的 ColW 模块）：
① **不做横向滚动** —— 表格宽度恒等于容器宽度；内容放不下的列**一律省略号截断**
（Y先生：「列宽不能完整显示的，就不做完整显示」）。colgroup 由 JS 按比例写死，
所以列宽不再由内容撑开；容器只许纵向滚动。
② **操作列固定右侧** —— th/td.actions 用 position:sticky; right:0 常驻，
任何列宽下都点得到；sticky 格必须自带**不透明背景**，且跟随斑马纹 / 悬停 / 预警行，
否则下层文字会透出来（这是 sticky 表格最常见的脏边）。
③ **列宽可自由调整** —— 表头每列右缘一个 .col-grip 手柄；拖动只在**相邻列之间转移宽度**
（就近借还，见 ColW.distribute），双击复原本列、Ctrl/⌘+双击复原整表。
⚠ 早期版本是"全表按余量比例分摊"，拖 1 列会带动 12 列、且来回拖回不到原位 ——
实测 12/13 列联动被判定为"很奇怪"，v0.9.5 改成就近借还（只动相邻 1 列）。
z-index 层级：表头 5、表头操作格 6、数据操作格 2（全局 th 是 1）——
必须让表头压住 sticky 数据格，否则纵向滚动时操作格会盖住表头。 */
.tblwrap{ overflow:hidden auto; } /* x 永不滚动；y 照旧滚 */
/* ⚠ 定宽布局只在 JS 接管后生效（.cw-fixed 由 ColW 挂上）：首次必须让浏览器先按**自然布局**
渲染一遍，ColW 才量得到真实的内容宽做「默认列宽」——若一上来就 fixed，量到的是平分宽度，
名称这类长文本列会被压到 40 多像素（实测踩过）。JS 未加载时保持 auto = 优雅降级。 */
table.grid.cw-fixed{ table-layout:fixed; }
table.grid th, table.grid td{ overflow:hidden; text-overflow:ellipsis; }
table.grid thead th{ z-index:5; }
table.grid th.actions, table.grid td.actions{
position:sticky; right:0; z-index:2;
background:var(--surface);
box-shadow:-1px 0 0 var(--border), -12px 0 14px -12px rgba(15,35,70,.18);
}
table.grid th.actions{ z-index:6; background:var(--surface-2); }
table.grid tbody tr:nth-child(even) td.actions{ background:#FAFBFD; }
table.grid tbody tr:hover td.actions{ background:var(--brand-50); }
table.grid tbody tr.warn-row td.actions{ background:var(--red-bg); }
table.grid tbody tr.warn-row:hover td.actions{ background:#F8E3E0; }
/* 拖拽手柄：平时隐形只留光标，hover 才亮出竖线（不干扰阅读） */
.col-grip{
position:absolute; top:0; right:0; width:9px; height:100%;
cursor:col-resize; z-index:7; touch-action:none;
}
.col-grip::after{
content:''; position:absolute; top:18%; right:3px; width:2px; height:64%;
border-radius:2px; background:transparent; transition:background .12s;
}
.col-grip:hover::after,
body.col-dragging .col-grip.active::after{ background:var(--brand-500); }
body.col-dragging{ cursor:col-resize; user-select:none; }
body.col-dragging table.grid th, body.col-dragging table.grid td{ cursor:col-resize; }
/* 拖动读数气泡：让"这一拖调了多少 px"看得见（跟随光标；pointer-events:none 免得拦住事件） */
.cw-tip{
position:fixed; z-index:9999; pointer-events:none;
padding:3px 9px; border-radius:6px;
font-size:12px; line-height:1.6; font-variant-numeric:tabular-nums;
background:#12233F; color:#fff; white-space:nowrap;
box-shadow:0 8px 20px -8px rgba(15,35,70,.55);
}
/* 拖动时高亮"真的动了"的列：一眼看出这次拖动影响了谁（就近借还后常态只有 2 列） */
table.grid thead th.cw-hit{ background:var(--brand-100); }
/* 可双击编辑的行（材料字典）：光标 + 悬停高亮 + 键盘焦点环 */
tbody tr.row-link{ cursor:pointer; }
tbody tr.row-link:hover td{ background:var(--brand-100); }
tbody tr.row-link:focus{ outline:none; }
tbody tr.row-link:focus-visible td:first-child{ box-shadow:inset 3px 0 0 var(--brand-500); }
tbody tr.row-link:focus-visible td{ background:var(--brand-100); }
/* 保存后目标行闪一下，明确"改的是哪条" */
tbody tr.row-flash td{ animation:rowFlash 1.9s ease; }
@keyframes rowFlash{
0%,20%{ background:var(--brand-200); }
100%{ background:transparent; }
}
.badge{
display:inline-flex; align-items:center; height:22px; padding:0 10px;
border-radius:11px; font-size:var(--fs-sm); font-weight:500;
}
.badge.warn{ background:var(--red-bg); color:var(--red); }
.badge.ok{ background:var(--green-bg); color:var(--green); }
.badge.adjust{ background:var(--amber-bg); color:var(--amber); }
.badge.mute{ background:var(--border-2); color:var(--t2); }
/* v0.9.19：改过的单据在列表单号后挂个「改」标记（蓝色 = 中性信息，与单据类型的琥珀色区分开） */
.badge.rev{ background:var(--brand-100); color:var(--brand-700); margin-left:6px; }
/* v0.9.19：修改态的顶部提示条（空着时用 :empty 自动收起，不占高度） */
.edithint{ margin:0 0 10px; padding:8px 12px; border-radius:6px;
background:var(--brand-100); color:var(--brand-700);
font-size:var(--fs-sm); font-weight:600; }
.edithint:empty{ display:none; }
/* v0.11.4 开单草稿提示条（与 .edithint 同色系；只在「新增」态且真有草稿时出现，与「正在修改」互斥）。
🟥 display:flex 会盖掉 UA 的 [hidden]{display:none} → 必须自己写一条同属性、更高特异性的覆盖。 */
.drafthint{ margin:0 0 10px; padding:8px 12px; border-radius:6px;
background:var(--brand-100); color:var(--brand-700);
font-size:var(--fs-sm); font-weight:600;
display:flex; align-items:center; gap:12px; }
.drafthint[hidden]{ display:none; }
.drafthint .dh-t{ flex:1 1 auto; }
.drafthint .dh-clr{ flex:0 0 auto; font-weight:600; cursor:pointer;
color:inherit; background:transparent; border:1px solid currentColor;
border-radius:4px; padding:2px 10px; font-size:var(--fs-sm); }
.drafthint .dh-clr:hover{ background:rgba(0,0,0,.06); }
.num-red{ color:var(--red); font-weight:600; }
.link{
color:var(--brand-600); font-weight:500; cursor:pointer;
font-variant-numeric:tabular-nums;
}
.link:hover{ color:var(--brand-700); text-decoration:underline; text-underline-offset:2px; }
.empty{ text-align:center; color:var(--t3); padding:52px 0; font-size:var(--fs-base); }
.mono{ font-family:var(--font-mono); font-size:var(--fs-sm); letter-spacing:.2px; }
.muted{ color:var(--t3); }
/* v0.10.0 数量口径：数量（块/吨）为主值，「件」为小字副值
—— 包装数=1（散料）时件=数量，前端不下发副值，避免一堆重复数字 */
.qmain{ display:block; line-height:1.35; }
.qsub{ display:block; font-size:11px; line-height:1.25; color:var(--t3);
font-variant-numeric:tabular-nums; }
.qu{ font-style:normal; font-size:11px; margin-left:2px; color:var(--t3); }
/* --------------------------------------------------------------------------
9. 弹窗
-------------------------------------------------------------------------- */
.modal-mask{
display:none; position:fixed; inset:0; z-index:100;
align-items:flex-start; justify-content:center; padding:6vh 16px 40px;
background:rgba(11,26,42,.48);
-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.modal-mask.show{ display:flex; }
.modal{
width:492px; max-width:100%; max-height:86vh; overflow:auto;
/* 🟥 上内边距归零：改由卡片第一个子元素 .m-fix 自己撑（padding-top:26px）——
这是「标题条能真正贴顶」的前提。写回 26px 的话，sticky:top:0 会停在 26px 处，
上方漏出一条会透内容的缝（v0.9.8 实测踩过），且卡片顶角圆角被方角标题条切掉。 */
padding:0 30px 24px;
background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--sh-3);
animation:popIn .2s ease;
}
.modal.wide{ width:748px; }
/* v0.11.9：单据详情卡片加宽 —— .modal.wide 被 scope/wh 两卡共用（坑 31：共用的别动），故给详情卡专属宽 */
#detailModal .modal{ width:1150px; }
@keyframes popIn{ from{ opacity:0; transform:translateY(-10px) scale(.985); } to{ opacity:1; transform:none; } }
.modal h2{ font-size:var(--fs-lg); color:var(--t1); margin-bottom:5px; }
.modal .sub{ font-size:var(--fs-sm); color:var(--t3); line-height:1.65; }
.modal .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.modal .grid2 input, .modal .grid2 select{ width:100%; }
.modal .footer{
display:flex; justify-content:flex-end; gap:10px;
margin-top:20px; padding-top:16px; border-top:1px solid var(--border-2);
}
.modal .footer button{ height:36px; padding:0 22px; }
/* 「删除材料」自 v0.9.7 起从字典行移入编辑弹窗 —— 删除是低频 + 危险动作，放弹窗里天然多一道缓冲，
行内也就只剩「编辑」一个按钮（操作列 84 → 56px）。margin-right:auto 把它顶到 footer 最左，
与右侧的「取消 / 保存」拉开距离防误点；红色语义沿用 --red / --red-line / --red-bg。 */
.modal .footer .btn-del-mat{ margin-right:auto; color:var(--red); border-color:var(--red-line); }
.modal .footer .btn-del-mat:hover{ background:var(--red-bg); border-color:var(--red); }
/* v0.10.5：单据详情弹窗的「删除这张单」（只入库单可见）—— 与材料弹窗同一条视觉语言：靠左 + 红描边 */
.modal .footer .btn-del-ord{ margin-right:auto; color:var(--red); border-color:var(--red-line); }
.modal .footer .btn-del-ord:hover{ background:var(--red-bg); border-color:var(--red); }
.form-err{ color:var(--red); font-size:var(--fs-sm); margin-top:10px; min-height:17px; }
/* 材料编辑卡片（双击字典行打开） */
.modal.card-mat{ width:900px; max-height:90vh; }
/* 字段栅格（v0.9.16）
卡片加宽到 900px 后一行放 4 个字段；长字段（名称/规格/厂家/单重/预警标准）占 2 格。
⚠ 只作用于材料卡片 —— .modal .grid2 还被入库/出库/调拨/用户页共用，动它必波及（坑 31）。
⚠ 轨道下限写 0：input 的 min-width:auto 约 170px，不加 0 下限会把栅格顶出去。 */
.modal.card-mat .grid2{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.modal.card-mat .grid2 > .span2{ grid-column:span 2; }
/* 单据卡片（v0.9.17 · Y先生：新增入库单也要加宽、一行 3-5 个字段）
入库/出库/调拨字段数 5/4/4 —— 用 auto-fit 而不是写死列数：字段多的铺满 5 列、
字段少的自动均分（右侧不留空），视口收窄时**自己降列**，不必每档补覆盖，
也就绕开了坑 49（卡片级规则 (0,3,0) 会吃掉移动档 (0,2,0)）。
实测（1080px）：入库 5 列 / 每列 190px；出库·调拨 4 列 / 每列 242px。
⚠ 只作用于单据卡片 —— .modal .grid2 还被用户页/仓库页共用（坑 31），别动那条。
⚠ 轨道下限 180px：再小则「入库仓库 三仓都能收货」这类长标签会折行。
⚠ 移动档要在**同特异性**上显式压回 1 列（见 §12 响应式），否则手机上仍是 3-4 列。 */
.modal.card-ord{ width:1080px; }
/* v0.11.3：出库单明细对齐现场用料单后是 11 格 → 卡片加宽到与入库同宽（1300px）才放得下；
v0.11.8：包装数与单重之间再插一列只读「数量」⇒ **12 格** → 同步放到 1400px
（内容宽 = 1400 − 60 = 1340 ≥ 1216 + gap 88 = 1304）。 */
#outOrdModal .modal.card-ord{ width:1400px; }
.modal.card-ord .grid2{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
/* 入库单卡片（v0.9.18 · Y先生：明细 9 列 + 末行合计 + 单重允许为 0）
入库明细比其他两个单据多 6 列，1080px 塞不下 → **入库单单独放到 1300px**；
出库 / 调拨仍走上面的 .card-ord（1080px），不受影响。
⚠ 明细行**不能改全局 .irow**（出库/调拨共用，坑 31）→ 一律 `#ioRows` 作用域；
(1,1,0) 的特异性也顺带压住了窄档那条 `.irow`（0,1,0），不会重蹈坑 49。
⚠ 列宽写成 CSS 变量：表头 / 明细行 / 合计行**三处共用**，逐列天然对齐，改一处即可全动。
⚠ #inOrdModal .modal 要 position:relative —— 候选层用 absolute 定位才能跟着卡片一起滚。 */
#inOrdModal .modal.card-ord{ width:1400px; } /* v0.11.8：明细 11 → 12 格（包装数后插「数量」）⇒ 1300 → 1400 */
#inOrdModal .modal{ position:relative; }
/* v0.10.10：第 4/5 列换序（数量(件/包) 挪到包装数前）→ 宽度同步换位并让位给更长的表头：
92+74 = 78+88 = 166px，**总宽不变**（卡片宽 / 滚动条行为不受影响）。 */
/* v0.11.5：尺寸规格之后插入「厂家」⇒ **11 格**。总宽 1140 + gap 80 = 1220 < 1240（卡片内容宽）
⇒ 不动卡片宽度，只把 名称 / 尺寸规格 / 备注 / 生产日期 各让几像素给新格。 */
/* v0.11.8（Y先生 2026-09-23）：包装数与单重之间插**只读「数量」格**（= 件数/包数 × 包装数）
⇒ **12 格**，卡片同步 1300 → 1400（内容宽 1340）。现列序：
名称 · 砖号 · 尺寸规格 · 厂家 · **件数/包数** · 包装数 · **数量** · 单重 · 重量 · 生产日期 · 备注 · 删
总宽 1228 + gap 88 = 1316 ≤ 1340 ✓（只加新格，不再从别的列上抠宽度） */
/* v0.11.18（Y先生 2026-09-24）：入库明细的「厂家」格从可手填 改成