/* 设计 token。员工手机页（work.css）有同一组值，改色时两边一起改。 */ /* 线条：不画方框（--line、--line-strong 透明，边框仍占 1px，版面不位移）。横线只用两种：--rule-strong 墨色线标出结构（表头下、合计上），--rule 浅线分隔列表的每一行。控件用 --surface-2 填色 */ :root{--bg:#fbfbf9;--surface:#fbfbf9;--surface-2:#f1f1ed;--surface-3:#eaeae5;--line:transparent;--line-strong:transparent;--rule:#e3e3e1;--rule-strong:#141413;--ink:#2e2d2a;--ink-2:#4a4944;--ink-3:#5c5b56;--accent:#43458f;--accent-hover:#36387a;--danger:#8a4330;--danger-soft:#f1e6de;--success:#2b6b45;--success-soft:#e9ede3;--warning:#6e5a1e;--warning-soft:#f1ecdd;--header-h:64px;--shadow:0 8px 24px rgba(20,20,19,.08);font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif;color:var(--ink)} *{box-sizing:border-box} button,input,select,textarea{font:inherit} small{font-size:12px} strong,b{font-weight:600} body{margin:0;background:var(--bg);font-size:14px;line-height:1.5} .app-shell{min-height:100vh;display:grid;grid-template-columns:220px 1fr} .sidebar{position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--rule);color:var(--ink-2);padding:20px 12px;display:flex;flex-direction:column} .sidebar-head{display:flex;align-items:center;flex-shrink:0;height:var(--header-h);margin:-20px -12px 24px;padding:0 16px;border-bottom:1px solid var(--line)} .brand{display:flex;align-items:center;padding:4px 6px;border:0;border-radius:6px;background:none;cursor:pointer} .brand img{display:block;height:28px;width:auto} .nav-item{border:0;background:transparent;color:var(--ink-2);padding:8px 10px;border-radius:6px;text-align:left;cursor:pointer;display:flex;gap:12px;align-items:center} .nav-item:hover{background:var(--surface-2);color:var(--ink)} .nav-item.active{background:var(--surface-2);color:var(--ink);font-weight:500} /* 账号区：上方一条贯穿侧栏的细线，名称靠左、登出靠右排成一行。 负边距抵掉侧栏内距，让细线接到左右分栏线、账号区贴齐窗口底边； 按钮与上方细线、右侧分栏线、窗口底边三处等距（同导航项目外框的内距），名称与导航文字对齐 */ .sidebar-foot{margin:auto -12px -20px;padding:12px 12px 12px 22px;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0} .local-badge{font-size:12px;color:var(--ink-3);min-width:0;overflow:hidden;text-overflow:ellipsis} #logoutBtn{flex-shrink:0} .main{min-width:0} .topbar{min-height:var(--header-h);background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 28px;position:sticky;top:0;z-index:5} .topbar h1{font-size:18px;font-weight:600;line-height:1.4;margin:0} .primary,.secondary,.danger,.success,.ghost{border:1px solid transparent;border-radius:6px;padding:0 12px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-weight:500;line-height:1.2;white-space:nowrap;text-decoration:none} .primary{background:var(--accent);color:#fff} .primary:hover{background:var(--accent-hover)} .secondary,.ghost,.success{background:var(--surface-2);border-color:var(--line-strong);color:var(--ink)} .secondary:hover,.ghost:hover,.success:hover{background:var(--surface-3)} .danger{background:var(--surface-2);border-color:var(--line-strong);color:var(--danger)} .danger:hover{background:var(--danger-soft)} .small{min-height:28px;padding:0 8px;font-size:12px} .content{padding:24px 28px} .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:32px} /* 统计数字（库存概况、重复整理、订单与员工工作的统计等）：标题与数值都在各自那一栏的正中，与表格的居中一致 */ .stat-card{padding:0 0 4px;text-align:center} .stat-card small{color:var(--ink-3);font-size:12px} .stat-card strong{display:block;font-size:24px;font-weight:400;line-height:1.3;margin-top:6px;font-variant-numeric:tabular-nums} .stat-card em{font-style:normal;font-size:12px;color:var(--ink-3)} .panel{background:var(--surface)} .panel-head{min-height:34px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:16px} .panel-head h2{font-size:15px;font-weight:600;line-height:1.4;margin:0} #content>.panel+.panel{margin-top:40px} .panel>:last-child{margin-bottom:0} .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:24px} .toolbar .search{flex:1;min-width:220px} /* 标题列右侧有多个按钮时成组靠右；工具列右侧的一组按钮贴齐内容右缘，与标题列按钮的右缘对齐 */ .head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end} .toolbar-end{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap} .input,select,textarea{width:100%;border:1px solid var(--line-strong);border-radius:6px;padding:7px 10px;background:var(--surface-2);color:var(--ink);font-size:14px;outline:none} /* Chrome 下 input[type=text] 的固有高度比 select 与 input[type=date] 少 2px， 只给 padding 不给 height，同一列就会高低不齐。统一在这里定， 所有筛选表单与表单栏位一并受惠，不必各自再补。textarea 例外，保留可拉伸。 */ .input,select{height:34px;line-height:1.2} /* 下拉选单不用各平台的原生外观，与输入框同高、同一个文字起点 */ select{-webkit-appearance:none;appearance:none;padding-right:30px;background-image:url(/select-arrow.svg);background-repeat:no-repeat;background-position:right 10px center;background-size:10px 7px} textarea.input{height:auto} .input:focus,select:focus,textarea:focus{border-color:var(--ink-3);box-shadow:none} .input::placeholder,textarea::placeholder{color:var(--ink-3)} .toolbar select{width:auto;min-width:150px} .toolbar label{display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .toolbar label .input{width:auto;min-width:150px} .table-wrap{overflow:auto} table{width:100%;border-collapse:collapse;white-space:nowrap} /* 栏与栏之间一律留 32px（左右各 16px），数字与后面的文字栏不会贴在一起 */ th,td{text-align:center;padding:10px 16px;border-bottom:1px solid var(--rule);vertical-align:middle} /* 表头与内容同字号，靠字重和下方的墨线区分层次 */ th{background:var(--surface);color:var(--ink-2);font-weight:600;font-size:14px;position:sticky;top:0} thead th{border-bottom-color:transparent;box-shadow:inset 0 -1px 0 var(--rule-strong)} tr:last-child td{border-bottom:0} /* 数量、单价、金额等数字栏靠右对齐：表头加 class="num"，同一栏的单元格自动跟着靠右，并用等宽数字让个位对齐 */ th.num{text-align:right} table:has(th.num:nth-child(1)) td:nth-child(1),table:has(th.num:nth-child(2)) td:nth-child(2),table:has(th.num:nth-child(3)) td:nth-child(3),table:has(th.num:nth-child(4)) td:nth-child(4),table:has(th.num:nth-child(5)) td:nth-child(5),table:has(th.num:nth-child(6)) td:nth-child(6),table:has(th.num:nth-child(7)) td:nth-child(7),table:has(th.num:nth-child(8)) td:nth-child(8),table:has(th.num:nth-child(9)) td:nth-child(9),table:has(th.num:nth-child(10)) td:nth-child(10),table:has(th.num:nth-child(11)) td:nth-child(11),table:has(th.num:nth-child(12)) td:nth-child(12),table:has(th.num:nth-child(13)) td:nth-child(13),table:has(th.num:nth-child(14)) td:nth-child(14),table:has(th.num:nth-child(15)) td:nth-child(15),table:has(th.num:nth-child(16)) td:nth-child(16){text-align:right;font-variant-numeric:tabular-nums} /* ── 表格栏位：对齐与宽度，全站统一 ── 标题与内容一律居中，内容落在标题正下方；只有数字靠右（标题同样靠右）；「操作」标题在下方整组按钮的正中。 内容区的表格栏宽由 app.js 的 balanceTables 排定：每栏先取内容的自然宽度，剩下的宽度平均分给各栏（「操作」栏除外）， 栏与栏之间的空隙处处一样；同一页上下对齐的两张表（汇总与明细）加同一个 data-grid，同位置的栏同宽， 上表的栏跟着下表同位置的栏对齐（下面是数字就靠右，否则居中），标题上下落在同一处。 下面 w-* 的宽度只是排定之前的预设，对话框里的表格（不排定）照这些宽度，小类表在「操作」前放一个空栏吃掉多出的宽度 */ th.w-time{width:180px} th.w-date{width:136px} th.w-name{width:104px} th.w-code{width:136px} th.w-num{width:96px} th.w-money{width:128px} th.w-tag{width:104px} th.w-main{width:240px} th.w-text{width:132px} /* 汇总与明细（员工工作、订单统计）、操作审计：放不下时长文字（含很长的编号）换行，不出横向捲轴 */ .wrap-table td{white-space:normal;overflow-wrap:anywhere} /* 表格最后的「操作」栏：栏宽只取按钮本身，按钮贴齐表格右缘，与标题列、工具列右侧的按钮对齐； 「操作」两字在下方整组按钮的正中。各列按钮数不同时，可有可无的按钮排在左边， 常驻的按钮固定在最右边同一位置。作废原因等文字可换行，不把操作栏撑宽 */ th.actions{width:1%} table:has(th.actions) td:last-child{text-align:right} table:has(th.actions) td:last-child small{white-space:normal} table:has(th.actions) td:last-child .row-actions{justify-content:flex-end} /* 排定后的表格照排好的栏宽排版；量宽度时暂时改回自动排版，连同分页藏起的列一起量，换页时栏宽不变 */ table.balanced{table-layout:fixed} table.col-measure,table.col-measure-min{table-layout:auto!important;min-width:0!important} table.col-measure{width:max-content!important} table.col-measure-min{width:min-content!important} :is(.col-measure,.col-measure-min) :is(col,th,td){width:auto!important} :is(.col-measure,.col-measure-min) tr.fit-off:not([hidden]){display:table-row!important} th:first-child,td:first-child{padding-left:0} th:last-child,td:last-child{padding-right:0} tbody tr:hover{background:var(--surface-2)} .muted{color:var(--ink-3)} .qty{font-weight:600;font-variant-numeric:tabular-nums} .work-pay-number{white-space:nowrap;font-variant-numeric:tabular-nums} .work-pay-total{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule-strong);display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right} .work-pay-total-line{display:flex;align-items:baseline;justify-content:flex-end;flex-wrap:wrap;gap:8px 12px;max-width:100%} .work-pay-total-line strong{font-size:22px;line-height:1.3;font-variant-numeric:tabular-nums} .tag{display:inline-block;padding:1px 7px;border-radius:4px;background:var(--surface-2);color:var(--ink-2);font-size:12px;line-height:1.6} .tag.green{background:var(--success-soft);color:var(--success)} .tag.orange{background:var(--warning-soft);color:var(--warning)} .row-actions{display:flex;gap:4px} .empty{text-align:center;padding:24px 20px;color:var(--ink-3)} .empty strong{display:block;color:var(--ink-2);font-weight:500;margin-bottom:4px} .positive{color:var(--success);font-weight:600} .negative{color:var(--danger);font-weight:600} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:12px} .board-card{background:var(--surface-2);border-radius:6px;padding:16px;cursor:pointer} .board-card:hover{background:var(--surface-3)} .board-card h3,.category-card h3{margin:0 0 6px;font-size:14px;font-weight:600;line-height:1.4} .board-card p,.category-card p{margin:0;color:var(--ink-3);font-size:12px} .board-meta{display:flex;justify-content:space-between;margin-top:16px;color:var(--ink-2)} .modal{width:min(720px,92vw);border:1px solid var(--line);border-radius:8px;padding:0;color:var(--ink);box-shadow:0 12px 32px rgba(20,20,19,.16)} .modal::backdrop{background:rgba(20,20,19,.32)} .modal-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center} .modal-head h2{margin:0;font-size:16px;font-weight:600;line-height:1.4} .modal-body{padding:20px;max-height:70vh;overflow:auto} .modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-group label{display:block;font-size:12px;color:var(--ink-2);margin:0 0 6px} .form-group.full{grid-column:1/-1} .form-group textarea{min-height:76px;resize:vertical} .close-x{border:0;background:none;font-size:20px;line-height:1;color:var(--ink-3);cursor:pointer;padding:4px} .close-x:hover{color:var(--ink)} .toast{position:fixed;right:24px;bottom:24px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:6px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s;z-index:20} .toast.show{opacity:1;transform:none} .toast.error{background:var(--danger)} .drop-zone{display:block;width:100%;min-height:120px;border:1px dashed var(--line-strong);border-radius:8px;padding:32px;text-align:center;background:var(--surface-2);cursor:pointer} .drop-zone:hover{background:var(--surface-3)} .drop-zone strong{display:block;font-size:14px;font-weight:600;margin-bottom:6px} .import-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px} .step{padding:10px;border-radius:6px;background:var(--surface-2);color:var(--ink-3);text-align:center} .step.active{background:var(--surface-3);color:var(--ink);font-weight:500} .mapping-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .notice{padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--ink-2);margin:12px 0;line-height:1.6} .detail-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start} .detail-head h2{margin:0 0 4px;font-size:18px;font-weight:600} .big-number{font-size:24px;font-weight:600} .backup-list{display:grid} .backup-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--rule)} .backup-item:last-child{border-bottom:0} .footer-note{color:var(--ink-3);font-size:12px} .tag.red{background:var(--danger-soft);color:var(--danger)} .input-suggestions-panel{margin-top:4px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);box-shadow:0 4px 12px rgba(20,20,19,.06);overflow:hidden} .suggestion-help{display:block;padding:6px 10px;background:var(--surface-2);color:var(--ink-3);font-size:12px} .input-suggestions-panel [role="listbox"]{max-height:165px;overflow:auto} .suggestion-option{padding:8px 10px;cursor:pointer;white-space:normal;overflow-wrap:anywhere;line-height:1.5} .suggestion-option:hover,.suggestion-option[aria-selected="true"]{background:var(--surface-2)} .suggestion-option .search-hit{font-weight:600} /* 更多筛选：与其他页面的筛选同一种排法（栏位 200px、自动换行）；标题与第一排栏位之间留 16px， 展开箭头与左侧栏同一种 ›，展开时转向下 */ .filter-panel{margin:0 0 24px} .filter-panel summary{cursor:pointer;font-weight:500;color:var(--ink-2);list-style:none;display:inline-flex;align-items:center;gap:8px} .filter-panel summary::-webkit-details-marker{display:none} .filter-panel summary::after{content:'›';color:var(--ink-3);transition:transform .15s} .filter-panel[open] summary::after{transform:rotate(90deg)} .filter-panel[open]>summary{margin-bottom:16px} .filter-panel summary .muted{font-weight:400;font-size:12px} .filter-grid{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end} .filter-grid .form-group{width:200px} .filter-grid .form-group:has(.filter-range){width:248px} .filter-range{display:flex;align-items:center;gap:8px} .filter-range .input{min-width:0} .filter-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:16px} .filter-actions small{flex:1;min-width:200px} .material-subtype{display:inline-block;margin-top:4px;white-space:normal;max-width:180px} button:disabled{opacity:.5;cursor:default} .search-hit{background:#efe2b8;color:inherit;border-radius:2px;padding:0 1px} /* 列表分页列：贴齐内容右缘。主要列表延伸到视窗底部时，卡片格的列不能被拉高 */ .pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px;min-height:28px} .pager-info{color:var(--ink-3);font-size:12px;margin-right:6px} [data-fit]{align-content:start} .fit-off{display:none!important} /* 出入库（含概览的最近出入库）：栏宽由 balanceTables 按内容排。 物料、板卡、用途太长时换行，时间与数字不换行；内容区窄于 1000px 时整张表横向捲动，物料栏至少保有约 170px */ .tx-table{table-layout:fixed;min-width:1000px} .tx-table td{white-space:normal;overflow-wrap:anywhere} .tx-table td:first-child,.tx-table .positive,.tx-table .negative,.tx-table .tx-qty{white-space:nowrap} /* 分类：缩小的卡片，名称与物料数上下排在左边（每张卡的物料数都对齐），操作按钮靠右。 卡片本身不能点，不做悬停变色；卡片是灰底，按钮改用页面底色才分得出来 */ .category-cards{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))} .category-card p{white-space:nowrap} .category-card{background:var(--surface-2);border-radius:6px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;cursor:default} .category-card h3{margin-bottom:2px} .category-card .row-actions{gap:8px;flex-shrink:0} .category-card .secondary,.category-card .danger{background:var(--bg)} .category-card .secondary:hover{background:var(--surface-3)} .category-card .danger:hover{background:var(--danger-soft)} /* 小类对话框的操作按钮间距 */ .item-table .row-actions{gap:8px} /* 手动排序对话框：一行一项，整行可拖动，也可用右侧箭头逐项移动 */ .order-list{list-style:none;margin:0;padding:0;display:grid} .order-list li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--rule);cursor:grab} .order-list li:last-child{border-bottom:0} .order-list li.dragging{opacity:.4} .order-handle{color:var(--ink-3);letter-spacing:-3px;padding:0 6px 0 2px} .order-label{flex:1;min-width:0} /* 封装：每个分类一行，封装栏占满剩余宽度并自动换行；小标签与按钮同一种灰底 */ .package-table td:nth-child(2){white-space:normal;width:100%} /* 封装标签是一串清单，从左到右排、满了换行（标题照样居中） */ .package-tags{display:flex;flex-wrap:wrap;gap:6px 8px} .package-tag{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:6px;background:var(--surface-2);font-size:13px;line-height:20px} .package-tag small{color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums} .package-remove{border:0;background:none;padding:0 2px;margin-right:-4px;font:inherit;font-size:14px;line-height:1;color:var(--ink-3);cursor:pointer} .package-remove:hover{color:var(--danger)} .package-table .row-actions{gap:8px} .compact-input{min-width:105px;padding:6px 8px} .mini-input{min-width:76px;width:88px} .wrap-cell{white-space:normal;min-width:170px;line-height:1.5} .editable-preview td{vertical-align:top} .editable-preview input[type="checkbox"]{width:16px;height:16px} .compare-stats{grid-template-columns:repeat(5,minmax(0,1fr))} .alias-line{color:var(--ink-2);white-space:pre-line} .check-line{display:flex!important;align-items:center;gap:8px;color:var(--ink)!important} .check-line input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--ink)} /* 自定义快捷操作：按左侧栏分组勾选；「恢复默认」靠左，和取消、保存分开 */ .quick-hint{margin:0 0 20px;color:var(--ink-3)} .quick-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px 32px;align-items:start} .quick-group{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px;align-content:start} .quick-group legend{padding:0;margin-bottom:10px;font-size:14px;font-weight:600;color:var(--ink)} .modal-foot .quick-default{margin-right:auto} .wide{width:100%;margin-top:8px} .card-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0} /* 只读人员：写入型控件一律不显示，服务端本来就会 403 */ body.role-reader [data-write]{display:none!important} /* 只有管理员能改的（分类、小类、封装、合并物料）：编辑人员与只读人员都不显示，服务端同样只准管理员 */ body:not(.role-admin) [data-admin-write]{display:none!important} /* 输入即搜的物料挑选框（板卡加物料）：清单可能上万笔，不放