:root {
/* === 中性色 (iOS / macOS Light) === */
--bg: #F5F5F7; /* 苹果官网经典背景灰 */
--bg-elevated: #FFFFFF; /* 卡片纯白 */
--bg-sunken: #EBEBEF; /* 略深的冷灰 */
--bg-hover: #F9F9FB; /* 极淡 hover */
--ink: #1D1D1F; /* 苹果黑 */
--ink-soft: #424248; /* 次要文字 */
--ink-mute: #6B6B6E; /* 静音文字(从 #86868B 加深到过 WCAG AA 4.5:1) */
--line: #E5E5EA; /* 极淡分隔线 (iOS systemGray5) */
--line-strong: #D1D1D6; /* 较深分隔线 (iOS systemGray4) */
/* === iOS 系统色 (System Colors) === */
--apple-blue: #007AFF; /* iOS Blue */
--apple-blue-hover: #0051D5;
--apple-blue-bg: #E5F0FF;
--ok: #248A3D; /* iOS Green 加深(从 #34C759 提高对比度) */
--ok-bg: #E1F5E5;
--ok-soft: #34C759; /* 浅版可用 */
--warn: #B25400; /* iOS Orange 略深 */
--warn-bg: #FFF1E0;
--danger: #D70015; /* iOS Red 略深 */
--danger-bg: #FFE5E5;
--photo: #007AFF; /* 跟 iOS Blue 统一 */
--photo-bg: #E5F0FF;
--await-fit: var(--await-fit); /* "等 fit comment" 状态色 — 黄褐色 */
--await-fit-bg: var(--await-fit-bg);
--await-fit-strong: var(--await-fit-strong); /* 强调用(border/dot/badge) */
/* === 阶段色 (iOS 系统色) === */
--stage-dev: #8E4EC6; /* iOS Purple 略深 */
--stage-dev-bg: #F2EAFA;
--stage-revise: #B25400; /* iOS Orange 略深 */
--stage-revise-bg: #FFF1E0;
--stage-prod: #007AFF; /* iOS Blue */
--stage-prod-bg: #E5F0FF;
--stage-done: #248A3D; /* iOS Green 略深 */
--stage-done-bg: #E1F5E5;
--stage-archived: #86868B; /* iOS Gray */
--stage-archived-bg: #F2F2F7;
/* === 阴影 (冷调,带轻微蓝灰) === */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
--shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.06);
/* === 背景渐变 === */
--bg-soft-gradient: linear-gradient(180deg, #F5F5F7 0%, #F2F2F4 100%);
/* === Z-Index 层级管理 === */
--z-base: 1;
--z-sticky: 10;
--z-dropdown: 50;
--z-drawer: 100;
--z-modal-backdrop: 200;
--z-modal: 210;
--z-toast: 10000; /* ui-fixes-v1: 盖过登录页 9999 */
--z-login: 9999;
/* === 苹果风焦点光晕 (alpha 从 0.25 提到 0.4,Tab 时更可见) === */
--focus-ring: 0 0 0 3px rgba(0, 122, 255, 0.4);
/* === 字体 (苹果系统栈优先) === */
--font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', sans-serif;
/* --font-mono 现在跟 sans 同字体(用户偏好:全站统一系统字体)
需要表格类等宽对齐的位置,组件自己加 font-variant-numeric: tabular-nums */
--font-mono: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', sans-serif;
--font-serif: 'Instrument Serif', Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
background: var(--bg); color: var(--ink);
font-family: var(--font-sans); font-size: 14px; line-height: 1.55;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
min-height: 100vh;
}
body { min-height: 100vh; }
/* === 键盘焦点环 (苹果风) === */
/* 鼠标点击不显示焦点环;Tab 键导航时才显示 */
*:focus { outline: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible,
.nav-item:focus-visible,
.filter-btn:focus-visible,
.top-tab:focus-visible,
.style-row:focus-visible,
.btn-new:focus-visible,
.po-add-btn:focus-visible,
.sidebar-new-btn:focus-visible,
.app-dialog-btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: 6px;
}
/* input/select/textarea 已有 border 时,焦点环不替换边框,只 outline */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
border-color: var(--apple-blue);
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }
::selection { background: rgba(0,122,255,0.15); color: var(--ink); }
header {
border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(16px) saturate(1.2);
background: rgba(250,250,247,0.82);
}
.header-inner {
max-width: 1800px; margin: 0 auto; padding: 14px 32px;
display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand h1 { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: 24px; letter-spacing: -0.015em; }
.brand .tag {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--ink-mute);
border: 1px solid var(--line); padding: 3px 8px; border-radius: 6px;
}
.header-stats { display: flex; gap: 24px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.header-stats span b { color: var(--ink); font-weight: 600; font-size: 14px; margin-right: 4px; }
.header-stats .dot-ok { color: var(--ok); }
.header-stats .dot-warn { color: var(--warn); }
.header-stats .dot-danger { color: var(--danger); }
.btn-new {
background: var(--ink); color: var(--bg); border: none;
padding: 10px 18px; font-family: var(--font-sans); font-size: 13px; font-weight: 600;
cursor: pointer; border-radius: 6px;
}
.btn-new:hover { transform: translateY(-1px); }
.top-tabs {
max-width: 1800px; margin: 0 auto; padding: 0 32px;
display: flex; gap: 0; border-bottom: 1px solid var(--line-strong);
}
.top-tab {
background: none; border: none; cursor: pointer;
padding: 14px 22px;
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
color: var(--ink-mute); border-bottom: 2px solid transparent;
margin-bottom: -1px;
display: flex; align-items: center; gap: 8px;
}
.top-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.top-tab:hover { color: var(--ink-soft); }
.top-tab .count {
background: var(--bg-sunken); color: var(--ink-soft);
padding: 2px 7px; border-radius: 10px;
font-family: var(--font-mono); font-size: 11px; font-weight: 500;
}
.top-tab.active .count { background: var(--ink); color: var(--bg); }
.controls {
max-width: 1800px; margin: 0 auto; padding: 16px 32px;
display: flex; gap: 12px; align-items: center;
border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.search { flex: 1; min-width: 240px; max-width: 320px; position: relative; }
.search input {
width: 100%; background: var(--bg-elevated);
border: 1px solid var(--line-strong);
padding: 9px 12px 9px 36px;
font-family: var(--font-sans); font-size: 13px; color: var(--ink);
border-radius: 6px; outline: none;
}
.search input:focus { border-color: var(--ink); }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); }
.filter-group {
display: flex; gap: 4px; padding: 3px;
background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 6px;
}
.filter-btn {
border: none; background: transparent;
padding: 5px 11px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
color: var(--ink-soft); cursor: pointer; border-radius: 6px; text-transform: uppercase;
}
.filter-btn:hover { color: var(--ink); }
.filter-btn.active { background: var(--bg-elevated); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
/* 跟单 tab 顶部 clientGroup 筛选 chip 行 */
.cg-chips-row {
margin: 2px 0 12px;
display: flex;
align-items: center;
}
.cg-chips-row .filter-group {
flex-wrap: wrap;
max-width: 100%;
gap: 3px;
padding: 4px;
background: rgba(120, 120, 128, 0.10);
border: 1px solid rgba(15, 23, 42, 0.05);
border-radius: 13px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}
.cg-chips-row .filter-btn {
text-transform: none;
letter-spacing: 0;
font-size: 13px;
font-family: var(--font-sans);
font-weight: 650;
min-height: 30px;
padding: 0 14px;
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 10px;
}
.cg-chips-row .filter-btn.active {
background: rgba(255, 255, 255, 0.96);
color: #111827;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
}
.cg-chip-count {
font-family: var(--font-mono);
font-size: 11px;
background: rgba(120, 120, 128, 0.14);
color: var(--ink-soft);
height: 19px;
min-width: 24px;
padding: 0 7px;
border-radius: 999px;
font-weight: 700;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
}
.cg-chips-row .filter-btn.active .cg-chip-count {
background: var(--apple-blue);
color: #fff;
}
.followup-stage-row {
margin: -2px 0 20px;
}
.followup-client-row {
margin: -2px 0 12px;
}
.followup-client-label {
margin-right: 8px;
padding-left: 2px;
color: var(--ink-mute);
font-size: 12px;
font-weight: 650;
white-space: nowrap;
}
.followup-stage-row .filter-group {
background: rgba(248, 250, 252, 0.92);
}
.followup-stage-label {
margin-right: 8px;
padding-left: 2px;
color: var(--ink-mute);
font-size: 12px;
font-weight: 650;
white-space: nowrap;
}
.followup-stage-row .filter-btn.active {
color: var(--apple-blue);
}
.followup-stage-row .filter-btn.active .cg-chip-count {
background: var(--apple-blue);
color: #fff;
}
.today-card-followup-stage {
margin-top: 8px;
padding: 6px 8px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: #F8FAFC;
border-radius: 8px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
color: var(--ink-soft);
}
.today-card-followup-stage .stage-dot {
width: 8px;
height: 8px;
border-radius: 99px;
background: #0A84FF;
border: 1px solid rgba(0, 122, 255, 0.38);
box-shadow:
0 0 0 3px rgba(10, 132, 255, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
flex: 0 0 auto;
}
.today-card-followup-stage .stage-label {
color: var(--ink-mute);
font-weight: 600;
}
.today-card-followup-stage .stage-main {
font-weight: 650;
color: var(--ink);
}
.today-card-followup-stage .stage-jump {
margin-left: auto;
border: 1px solid var(--line-strong);
background: #fff;
color: var(--ink);
border-radius: 6px;
padding: 3px 8px;
font-size: 12px;
font-weight: 650;
cursor: pointer;
}
.today-card-followup-stage .stage-jump:hover {
border-color: var(--apple-blue);
color: var(--apple-blue);
}
/* 缺面料 chip — 独立筛选维度,与客户组叠加;琥珀色警示感 */
.cg-chips-row .filter-btn.fabric-pending-chip {
margin-left: 12px;
color: var(--warn);
border-color: transparent;
}
.cg-chips-row .filter-btn.fabric-pending-chip:hover {
background: var(--warn-bg);
}
.cg-chips-row .filter-btn.fabric-pending-chip.active {
background: var(--warn-bg);
color: var(--warn);
box-shadow: inset 0 0 0 1px var(--warn);
}
.cg-chips-row .filter-btn.fabric-pending-chip .cg-chip-count {
background: var(--warn-bg);
color: var(--warn);
}
.cg-chips-row .filter-btn.fabric-pending-chip.active .cg-chip-count {
background: var(--warn);
color: #fff;
}
.dev-scope-row {
margin-top: -6px;
}
.dev-scope-row .filter-group {
background: #F7F8FB;
}
.dev-scope-label {
display: inline-flex;
align-items: center;
padding: 0 8px;
font-size: 12px;
color: var(--ink-mute);
white-space: nowrap;
}
.cg-chips-row .filter-btn.dev-scope-chip.active {
color: var(--apple-blue);
}
.record-kind-pill {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 7px;
border-radius: 6px;
border: 1px solid #D7DAE2;
background: #F4F5F8;
color: #5E6673;
font-size: 11px;
font-weight: 700;
line-height: 18px;
white-space: nowrap;
}
.view-toggle {
display: flex; margin-left: auto;
border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden;
}
.view-toggle button {
border: none; background: var(--bg-elevated);
padding: 7px 13px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
color: var(--ink-soft); cursor: pointer; text-transform: uppercase;
}
.view-toggle button.active { background: var(--ink); color: var(--bg); }
main { max-width: 1800px; margin: 0 auto; padding: 28px 32px 80px; }
.style-list {
display: flex; flex-direction: column; gap: 0;
border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
background: var(--bg-elevated);
}
/* perf-pagination-v1: 加载更多 */
.list-load-more {
padding: 18px;
text-align: center;
background: linear-gradient(180deg, transparent, var(--bg-sunken, #FAFAFC));
border-top: 1px solid var(--line);
}
.list-load-more-btn {
background: var(--apple-blue, #007AFF);
color: #fff;
border: none;
padding: 9px 22px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,122,255,0.15);
}
.list-load-more-btn:hover { background: var(--apple-blue-hover, #0051D5); }
.list-load-more-hint { font-size: 11.5px; color: var(--ink-mute); margin-top: 6px; }
.list-load-more-end {
padding: 14px;
text-align: center;
font-size: 11.5px;
color: var(--ink-mute);
background: var(--bg-sunken, #FAFAFC);
border-top: 1px solid var(--line);
}
.list-header {
display: grid;
grid-template-columns: 80px 110px 90px 200px 1fr 95px 36px;
gap: 16px; padding: 10px 20px;
background: var(--bg-sunken); border-bottom: 1px solid var(--line);
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--ink-mute); font-weight: 500;
}
.style-row {
display: grid;
grid-template-columns: 80px 110px 90px 200px 1fr 95px 36px;
gap: 16px; padding: 12px 20px;
background: var(--bg-elevated);
align-items: center; cursor: pointer;
border-bottom: 1px solid var(--line);
transition: background 0.12s ease;
}
.style-row:last-child { border-bottom: none; }
.style-row:hover { background: var(--bg-hover); }
.style-row:hover .arrow { color: var(--ink); transform: translateX(2px); }
.arrow { color: var(--ink-mute); text-align: right; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease; }
.style-row.urgent-danger { border-left: 3px solid var(--danger); padding-left: 17px; }
.style-row.urgent-warn { border-left: 3px solid var(--warn); padding-left: 17px; }
.thumb {
width: 56px; height: 72px;
background: var(--bg-sunken); border: 1px solid var(--line);
border-radius: 6px; object-fit: cover; display: block;
}
.thumb-placeholder {
width: 56px; height: 72px;
background: var(--bg-sunken); border: 1px dashed var(--line-strong);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
color: var(--ink-mute);
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
}
.sku { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink); word-break: break-all; line-height: 1.3; }
.client-badge {
display: inline-flex; align-items: center;
padding: 3px 9px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em;
font-weight: 500; border-radius: 4px; text-transform: uppercase;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: #EEF4FB;
color: #24506F;
border: 1px solid #CFDDEA;
}
.client-boohoo { background: #1a1a1a; color: #fff; }
.client-plt { background: #FFC9D9; color: #8B1E3F; }
.client-other { background: var(--bg-sunken); color: var(--ink-soft); border: 1px solid var(--line-strong); }
/* 客户组别徽章 (clientGroup) — 跟 client-badge 视觉对齐但用不同色系区分 */
.group-badge {
display: inline-flex; align-items: center;
padding: 3px 9px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em;
font-weight: 600; border-radius: 4px; text-transform: uppercase;
white-space: nowrap;
}
.group-woven { background: #FAECE7; color: #712B13; } /* coral */
.group-plus { background: #FBEAF0; color: #72243E; } /* pink */
.group-dress { background: #E6F1FB; color: #0C447C; } /* blue */
.group-co-ords { background: #FFF1D6; color: #7A4A00; } /* amber */
.group-petite-tall { background: #EAF3DE; color: #27500A; } /* green */
.group-maternity { background: #F0EAFB; color: #4D2A7A; } /* violet */
/* Buyer 名字 — 简单的灰色小字签 */
.buyer-tag {
display: inline-flex; align-items: center;
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute); letter-spacing: 0.02em;
white-space: nowrap;
}
.buyer-tag::before {
content: "·"; margin-right: 4px; color: var(--ink-mute);
}
/* 工厂徽章 */
.factory-badge {
display: inline-flex; align-items: center;
padding: 2px 7px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
font-weight: 500; border-radius: 4px;
white-space: nowrap;
}
.factory-hubei { background: #E6F1FB; color: #0C447C; }
.factory-jiangxi { background: #EAF3DE; color: #27500A; }
.style-name { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.3; word-break: break-word; overflow-wrap: break-word; }
.style-subinfo { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); margin-top: 3px; letter-spacing: 0.02em; }
.stage-bar {
display: flex; align-items: center; gap: 0;
margin-bottom: 12px;
}
.stage-step { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.stage-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--bg-elevated);
border: 2px solid var(--line-strong);
flex-shrink: 0;
}
.stage-dot.done { background: var(--ink); border-color: var(--ink); }
.stage-dot.current { background: var(--ink); border-color: var(--ink); width: 14px; height: 14px; box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.stage-dot.archived { background: var(--stage-archived); border-color: var(--stage-archived); }
.stage-label { font-family: var(--font-sans); font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.stage-label.current { color: var(--ink); font-weight: 600; }
.stage-label.done { color: var(--ink-soft); }
.stage-label.archived { color: var(--stage-archived); font-style: italic; }
.stage-conn { flex: 0 0 auto; width: 18px; height: 1px; background: var(--line-strong); margin: 0 6px; }
.stage-conn.done { background: var(--ink); }
.flow-wrap { display: flex; flex-direction: column; min-width: 0; }
.flow-line { display: flex; align-items: flex-start; gap: 0; min-width: 0; padding-top: 4px; }
.flow-node-unit { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; min-width: 0; }
.flow-node-label {
font-family: var(--font-sans); font-size: 11px;
color: var(--ink-mute);
text-align: center; line-height: 1.3;
margin-bottom: 4px;
white-space: nowrap;
max-width: 90px; overflow: hidden; text-overflow: ellipsis;
}
.flow-node-label.current { color: var(--ink); font-weight: 600; }
.flow-node-label.done { color: var(--ink-soft); }
.flow-node {
width: 12px; height: 12px; border-radius: 50%;
border: 2px solid var(--line-strong);
background: var(--bg-elevated);
flex-shrink: 0;
}
.flow-node.done { background: var(--ink); border-color: var(--ink); }
.flow-node.current { width: 18px; height: 18px; border-width: 3px; margin: -3px 0 0; }
.flow-node.current-ok { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.flow-node.current-warn { background: var(--warn); border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); animation: nodePulse 2s ease-in-out infinite; }
.flow-node.current-danger { background: var(--danger); border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); animation: nodePulse 1.1s ease-in-out infinite; }
.flow-node.final-approved { background: var(--ok); border-color: var(--ok); }
@keyframes nodePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.65; }
}
.flow-node-date {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute); margin-top: 4px; white-space: nowrap;
}
.flow-node-date.current { color: var(--ink); font-weight: 600; }
.flow-node-date.current-ok { color: var(--ok); }
.flow-node-date.current-warn { color: var(--warn); }
.flow-node-date.current-danger { color: var(--danger); }
.flow-connector {
flex: 1; min-width: 14px; height: 2px;
background: var(--line-strong); align-self: center; margin-top: 18px;
}
.flow-connector.done { background: var(--ink); }
.flow-connector.dashed { background: transparent; border-top: 2px dashed var(--line-strong); height: 0; }
/* 虚拟/迁移历史节点样式 */
.big-flow-dot.virtual { background: var(--bg-sunken); border-color: var(--line-strong); opacity: 0.55; }
.big-flow-label-top.virtual { color: var(--ink-mute); opacity: 0.6; font-style: italic; }
.big-flow-connector.virtual-conn { background: transparent; border-top: 2px dashed var(--line); opacity: 0.45; height: 0; }
.current-stage-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.04em; font-weight: 500;
border-radius: 6px; margin-bottom: 10px;
}
.pill-dev { background: var(--stage-dev-bg); color: var(--stage-dev); }
.pill-revise { background: var(--stage-revise-bg); color: var(--stage-revise); }
.pill-prod { background: var(--stage-prod-bg); color: var(--stage-prod); }
.pill-done { background: var(--stage-done-bg); color: var(--stage-done); }
.pill-archived { background: var(--stage-archived-bg); color: var(--stage-archived); }
.pill-await-fit { background: #F5E9D1; color: #855316; }
.days-cell { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.days-indicator { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.days-ok .days-indicator { background: var(--ok); }
.days-warn .days-indicator { background: var(--warn); animation: pulse 2s ease-in-out infinite; }
.days-danger .days-indicator { background: var(--danger); animation: pulse 1.2s ease-in-out infinite; }
.days-done .days-indicator { background: var(--line-strong); }
.days-ok { color: var(--ok); }
.days-warn { color: var(--warn); }
.days-danger { color: var(--danger); }
.days-done { color: var(--ink-mute); }
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
.arrow { color: var(--ink-mute); text-align: right; }
.board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 14px; overflow-x: auto; }
.board-col {
background: var(--bg-sunken); border-radius: 10px; border: 1px solid var(--line);
display: flex; flex-direction: column; min-height: 400px;
}
.board-col-header {
padding: 12px 14px; border-bottom: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between;
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 500;
}
.board-col-count { background: var(--bg-elevated); color: var(--ink); padding: 2px 7px; border-radius: 10px; font-size: 11px; }
.board-items { padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.board-card {
background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 8px;
padding: 12px 14px; cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.board-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.07); border-color: var(--line-strong); }
.board-card.urgent-danger { border-left: 3px solid var(--danger); }
.board-card.urgent-warn { border-left: 3px solid var(--warn); }
.board-card-stage-pill {
display: inline-block;
padding: 2px 6px; margin-bottom: 6px;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.06em; font-weight: 500;
border-radius: 6px; text-transform: uppercase;
}
.board-card-top { display: flex; gap: 10px; margin-bottom: 8px; align-items: flex-start; }
.board-card .thumb { width: 44px; height: 58px; flex-shrink: 0; }
.board-card .thumb-placeholder { width: 44px; height: 58px; flex-shrink: 0; }
.board-card-info { flex: 1; min-width: 0; }
.board-card-sku { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); margin-bottom: 2px; }
.board-card-name {
font-size: 13px; font-weight: 500; line-height: 1.3;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.board-card-bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 6px; border-top: 1px dashed var(--line);
}
.drawer-backdrop {
position: fixed; inset: 0; background: rgba(22, 22, 15, 0.3);
z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
position: fixed; right: 0; top: 0; height: 100vh; width: 720px; max-width: 96vw;
background: var(--bg-elevated); z-index: 101;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
display: flex; flex-direction: column;
box-shadow: -8px 0 30px rgba(0,0,0,0.08);
}
.drawer.open { transform: translateX(0); }
.drawer-header {
padding: 20px 24px; border-bottom: 1px solid var(--line);
display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.drawer-title { flex: 1; }
.drawer-title .sku { font-size: 11px; letter-spacing: 0.08em; color: var(--ink-mute); margin-bottom: 4px; }
.drawer-title h2 {
font-family: var(--font-serif); font-weight: 400;
font-size: 26px; line-height: 1.15; letter-spacing: -0.01em;
}
.drawer-desc { font-size: 13px; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; }
.drawer-close {
background: none; border: 1px solid var(--line-strong);
width: 32px; height: 32px; cursor: pointer; border-radius: 6px;
display: flex; align-items: center; justify-content: center; color: var(--ink-soft);
}
.drawer-close:hover { color: var(--ink); border-color: var(--ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: 0 32px 28px; }
/* drawer-flow-fix-v1: 抽屉下半段模块必须跟随 .drawer-body 正常滚动 */
.drawer-body > .qf-section,
.drawer-body > .notes-section,
.drawer-body > .style-gallery-collapsible {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
z-index: auto !important;
}
/* ============================================================
Lane 1 - 抽屉顶部 sticky 状态条 + 快速操作
状态(chip) + 该催谁 + 最近 EF/倒计时 一行;下面快速操作 sticky
============================================================ */
.drawer-status-actions {
position: sticky; top: 0; z-index: 5;
background: var(--bg-elevated);
margin: 0 -32px 20px; /* 不用 negative top:sticky 不识别 margin,会失效 */
padding: 16px 32px 14px;
border-bottom: 1px solid var(--line);
}
/* 状态条:统一字号 13px sans + 行高 + 垂直对齐 */
.drawer-status-row {
display: flex; align-items: center; gap: 14px;
flex-wrap: wrap;
font-size: 13px;
margin-bottom: 12px;
min-height: 28px; /* 确保 chip 不显得拥挤 */
}
.drawer-status-chip {
display: inline-flex; align-items: center;
padding: 4px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.4;
}
.drawer-status-chip.level-danger { background: var(--danger-bg); color: var(--danger); }
.drawer-status-chip.level-warn { background: var(--warn-bg); color: var(--warn); }
.drawer-status-chip.level-ok { background: var(--ok-bg); color: var(--ok); }
.drawer-status-chip.level-done { background: var(--ok-bg); color: var(--ok); }
.drawer-status-chip.level-archived { background: var(--bg-sunken); color: var(--ink-mute); }
/* === drawer-size-color-v1 START === */
/* 码数 chip(版师扫读关键工艺信息) */
.drawer-status-chip-size {
display: inline-flex;
align-items: center;
gap: 4px;
background: #F0EBF7;
color: #4B2E83;
padding: 4px 10px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
}
.drawer-status-chip-size .lbl { font-size: 11px; opacity: 0.7; font-weight: 400; }
/* 颜色 chip(双语) */
.drawer-status-chip-color {
display: inline-flex;
align-items: center;
background: #F5F0E9;
color: #5C3A14;
padding: 4px 10px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
}
.drawer-status-chip-color .en {
margin-left: 4px;
opacity: 0.65;
font-weight: 400;
}
/* 未填占位 */
.drawer-status-chip-empty {
display: inline-flex;
align-items: center;
background: #F5F5F5;
color: #999;
padding: 4px 10px;
border-radius: 6px;
font-size: 13px;
font-style: italic;
line-height: 1.2;
}
/* === drawer-size-color-v1 END === */
/* === color-chip-tint-v1 START === */
.gc-chip-swatch {
width: 10px;
height: 10px;
border-radius: 3px;
margin-right: 6px;
display: inline-block;
flex: 0 0 auto;
border: 1px solid rgba(0,0,0,0.12);
}
.drawer-status-chip-color.gc-chip-tinted {
align-items: center;
}
.drawer-status-chip-color.gc-chip-tinted .en {
opacity: 0.7;
}
/* === color-chip-tint-v1 END === */
.drawer-status-meta {
font-size: 13px;
color: var(--ink-soft);
font-family: var(--font-sans);
display: inline-flex; align-items: center; gap: 4px;
}
.drawer-status-meta b {
color: var(--ink);
font-weight: 600;
}
.drawer-status-meta.meta-ok { color: var(--ok); font-weight: 650; }
.drawer-status-meta.meta-warn { color: var(--warn); }
.drawer-status-meta.meta-danger { color: var(--danger); font-weight: 600; }
/* 快速操作:所有按钮统一 height 32px,padding 一致 */
.drawer-quick-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.drawer-quick-actions button {
height: 34px;
padding: 0 14px;
border: 1px solid var(--line-strong);
background: var(--bg-elevated);
color: var(--ink);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
cursor: pointer;
border-radius: 7px;
display: inline-flex; align-items: center; gap: 6px;
white-space: nowrap;
line-height: 1;
}
.drawer-quick-actions button:hover { border-color: var(--ink); }
.drawer-quick-actions button.primary {
background: var(--apple-blue);
color: #fff;
border-color: var(--apple-blue);
}
.drawer-quick-actions button.primary:hover {
background: var(--apple-blue-hover);
border-color: var(--apple-blue-hover);
}
.drawer-quick-actions button.danger {
color: var(--danger);
border-color: var(--danger);
background: var(--bg-elevated);
margin-left: auto;
}
.drawer-quick-actions button.danger:hover {
background: var(--danger);
color: #fff;
}
/* 完整流程图 — 简化背景,减少视觉重量 */
.drawer-flow-section {
padding: 18px 16px;
margin-bottom: 20px;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 8px;
overflow-x: auto;
}
.detail-image-wrap {
position: relative; margin-bottom: 24px;
border: 1px solid var(--line); border-radius: 8px;
overflow: hidden; background: var(--bg-sunken);
}
.detail-image {
width: 100%; max-height: 420px; object-fit: contain;
display: block; background: var(--bg-sunken);
}
.detail-image-placeholder {
padding: 50px 20px; text-align: center; color: var(--ink-mute);
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
}
.image-change-btn {
position: absolute; bottom: 8px; right: 8px;
background: rgba(22, 22, 15, 0.85); color: var(--bg); border: none;
padding: 6px 10px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
cursor: pointer; border-radius: 6px; text-transform: uppercase;
}
.po-card {
background: var(--bg-sunken); border-radius: 8px;
padding: 14px 16px; margin-bottom: 20px;
border-left: 3px solid var(--stage-prod);
}
.po-card-row {
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; padding: 4px 0;
}
.po-card-row .lbl {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute);
}
.po-card-row .val { font-weight: 500; color: var(--ink); font-family: var(--font-mono); font-size: 13px; }
.drawer-flow-section {
padding: 24px 16px;
margin-bottom: 24px;
background: linear-gradient(to bottom, var(--bg-sunken), transparent);
border-radius: 8px; overflow-x: auto;
}
.big-flow {
display: flex; align-items: flex-start;
min-width: fit-content; padding: 0 8px;
}
.big-flow-node {
display: flex; flex-direction: column; align-items: center;
flex-shrink: 0; min-width: 100px;
}
.big-flow-label-top {
font-family: var(--font-sans); font-size: 11px;
color: var(--ink-mute);
text-align: center; line-height: 1.3; max-width: 100px;
margin-bottom: 8px; padding: 0 4px; min-height: 28px;
}
.big-flow-label-top.current { color: var(--ink); font-weight: 600; }
.big-flow-label-top.done { color: var(--ink-soft); }
.big-flow-dot {
width: 14px; height: 14px; border-radius: 50%;
background: var(--bg-elevated); border: 2px solid var(--line-strong);
flex-shrink: 0;
}
.big-flow-dot.done { background: var(--ink); border-color: var(--ink); }
.big-flow-dot.current { width: 22px; height: 22px; margin-top: -4px; border-width: 3px; }
.big-flow-dot.current-ok { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 5px var(--ok-bg); }
.big-flow-dot.current-warn { background: var(--warn); border-color: var(--warn); box-shadow: 0 0 0 5px var(--warn-bg); animation: nodePulse 2s ease-in-out infinite; }
.big-flow-dot.current-danger { background: var(--danger); border-color: var(--danger); box-shadow: 0 0 0 5px var(--danger-bg); animation: nodePulse 1.1s ease-in-out infinite; }
.big-flow-dot.final-approved { background: var(--ok); border-color: var(--ok); }
/* 辅助里程碑节点（版师打完 / 面料备齐）— 小一点、专属色 */
.big-flow-dot.milestone {
width: 10px; height: 10px;
border-width: 1.5px;
}
.big-flow-dot.milestone-pm { background: #534AB7; border-color: #534AB7; }
.big-flow-dot.milestone-fb { background: #BA7517; border-color: #BA7517; }
.big-flow-label-top.milestone {
font-size: 10.5px;
color: var(--ink-soft);
font-weight: 500;
font-style: italic;
opacity: 0.85;
}
.big-flow-date {
font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
margin-top: 6px;
}
.big-flow-date.current-ok { color: var(--ok); font-weight: 600; }
.big-flow-date.current-warn { color: var(--warn); font-weight: 600; }
.big-flow-date.current-danger { color: var(--danger); font-weight: 600; }
.big-flow-connector {
flex: 0 0 auto; width: 36px; height: 2px; background: var(--line-strong);
margin-top: 30px; align-self: flex-start;
}
.big-flow-connector.done { background: var(--ink); }
.big-flow-connector.dashed { background: transparent; border-top: 2px dashed var(--line-strong); height: 0; }
/* #5: 阶段进度横条 + 跳下一阶段按钮 同一行,按钮右对齐 */
.stage-row {
display: flex; align-items: center; gap: 16px;
margin-bottom: 20px;
}
.stage-row-bar { flex: 1; min-width: 0; }
.stage-row-action { flex-shrink: 0; }
/* meta-grid - 4 个卡片严格同高同 padding */
.meta-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px;
padding-bottom: 0;
border-bottom: none;
margin-bottom: 20px;
}
.meta-item {
background: var(--bg-sunken);
border-radius: 8px;
padding: 12px 14px;
min-height: 64px;
display: flex; flex-direction: column;
justify-content: center;
gap: 5px;
}
.meta-item .label {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-mute); margin-bottom: 0;
font-weight: 600;
}
.meta-item .value { font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.3; }
.section-title {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink-mute); margin-bottom: 14px; font-weight: 500;
display: flex; align-items: center; gap: 10px;
}
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* 时间线 — 统一行高 / 用左侧圆点 + 竖线表示连续性,代替 border-left 色条 */
.history-log {
display: flex; flex-direction: column;
position: relative;
}
.log-entry {
display: grid; grid-template-columns: 84px 1fr auto;
gap: 16px;
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
align-items: center;
min-height: 44px;
cursor: pointer;
position: relative;
transition: background-color 0.15s ease;
}
.log-entry:hover { background: var(--bg-hover); }
.log-entry.active {
background: var(--apple-blue-bg);
font-weight: 500;
}
/* outcome 颜色用一个左侧小圆点,而非整行 border-left */
.log-entry::before {
content: '';
position: absolute;
left: -2px; top: 50%;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--line-strong);
transform: translateY(-50%);
}
.log-entry.outcome-remake::before { background: var(--danger); }
.log-entry.outcome-approved::before { background: var(--ok); }
.log-entry.outcome-photo::before { background: var(--photo); }
.log-entry.outcome-archived::before { background: var(--stage-archived); }
.log-entry.outcome-po::before { background: var(--stage-prod); }
.log-entry.active::before { background: var(--apple-blue); width: 8px; height: 8px; }
.log-date {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-mute);
font-weight: 500;
letter-spacing: 0.02em;
}
.log-content { color: var(--ink); line-height: 1.4; min-width: 0; }
.log-content .event-name { font-weight: 500; font-size: 13px; }
.log-content .event-detail {
font-size: 12px;
color: var(--ink-soft);
margin-top: 3px;
line-height: 1.4;
}
.log-edit-icon {
color: var(--ink-mute); font-size: 14px;
display: flex; align-items: center; justify-content: center;
}
.log-entry:hover .log-edit-icon { color: var(--ink); }
.log-actions {
display: flex; gap: 4px;
opacity: 0;
transition: opacity 0.15s ease;
}
.log-entry:hover .log-actions,
.log-entry:focus-within .log-actions {
opacity: 1;
}
.drawer-actions {
padding: 16px 24px; border-top: 1px solid var(--line-strong);
background: var(--bg-sunken);
display: flex; gap: 8px; flex-wrap: wrap;
}
.drawer-actions button {
border: 1px solid var(--line-strong); background: var(--bg-elevated);
padding: 9px 14px;
font-family: var(--font-sans); font-size: 12px; font-weight: 500;
cursor: pointer; border-radius: 6px; color: var(--ink);
}
.drawer-actions button:hover { border-color: var(--ink); }
.drawer-actions button.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.drawer-actions button.danger { color: var(--danger); border-color: var(--danger); }
.drawer-actions button.danger:hover { background: var(--danger); color: var(--bg-elevated); }
.modal-backdrop {
position: fixed; inset: 0; background: rgba(22, 22, 15, 0.4);
z-index: 200;
display: flex; align-items: center; justify-content: center;
padding: 20px;
opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
background: var(--bg-elevated); border-radius: 8px;
max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
transform: translateY(20px); transition: transform 0.25s;
}
.modal-backdrop.open .modal { transform: translateY(0); }
.modal-header {
padding: 20px 24px;
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
background: var(--bg-elevated);
z-index: 2;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.modal-header h3 { font-family: var(--font-serif); font-weight: 400; font-size: 22px; font-style: italic; }
.modal-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.form-field label {
display: block; font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink-mute); margin-bottom: 6px; font-weight: 500;
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%; background: var(--bg);
border: 1px solid var(--line-strong); padding: 9px 11px;
font-family: var(--font-sans); font-size: 13px; color: var(--ink);
border-radius: 6px; outline: none;
box-sizing: border-box;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--ink); background: var(--bg-elevated); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr; gap: 12px; }
.field-with-action {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: stretch;
}
.field-with-action select { min-width: 0; }
.inline-add-btn {
border: 1px solid var(--line-strong);
background: var(--bg-elevated);
color: var(--apple-blue);
border-radius: 6px;
padding: 0 12px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.inline-add-btn:hover {
border-color: var(--apple-blue);
background: var(--apple-blue-bg);
}
/* PO modal 分段(必要 / 基础 / 补充信息)— 紧凑布局 */
.po-modal-section { margin-bottom: 14px; }
.po-modal-section:last-child { margin-bottom: 0; }
.po-modal-section-title {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 600;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
gap: 8px;
}
/* section 内部字段统一紧凑 spacing */
.po-modal-section .form-row,
.po-modal-section .form-field {
margin-top: 8px;
}
.po-modal-section .form-row:first-of-type,
.po-modal-section > .form-field:first-of-type,
.po-modal-section-body > .form-row:first-of-type,
.po-modal-section-body > .form-field:first-of-type {
margin-top: 0;
}
/* label 跟 input 之间紧凑 */
.po-modal-section .form-field label {
margin-bottom: 4px;
font-size: 11px;
letter-spacing: 0.04em;
}
.po-modal-section .form-field input,
.po-modal-section .form-field select {
padding: 8px 10px;
font-size: 13px;
}
.po-modal-section-extra { padding: 0; }
.po-modal-section-body {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.po-fields-section {
padding: 14px;
background: var(--bg-sunken);
border-radius: 8px;
border-left: 3px solid var(--stage-prod);
}
.po-fields-section { padding: 18px; background: var(--bg-sunken); border-radius: 12px; border: 1px solid var(--line); }
.po-fields-section .section-mini-title { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.po-color-card { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; position: relative; }
.po-color-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.po-color-card-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; }
.po-color-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex-shrink: 0; }
.po-color-card-remove { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: transparent; color: var(--ink-mute); border-radius: 6px; cursor: pointer; font-size: 14px; transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.12s, opacity 0.12s, box-shadow 0.12s; }
.po-color-card-remove:hover { background: rgba(255,59,48,0.08); color: var(--danger); }
.po-color-card-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.po-color-card-fields .form-field { margin: 0; }
.po-color-card-fields .form-field.full { grid-column: 1 / -1; }
.po-add-color-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px; border: 1.5px dashed var(--line-strong); background: transparent; border-radius: 10px; color: var(--ink-mute); font-family: var(--font-sans); font-size: 12px; font-weight: 500; cursor: pointer; transition: background-color 0.14s, border-color 0.14s, color 0.14s, transform 0.14s, opacity 0.14s, box-shadow 0.14s; }
.po-add-color-btn:hover { border-color: var(--ink); color: var(--ink); background: var(--bg-elevated); }
.fit-comment-section {
padding: 14px;
background: var(--warn-bg);
border-radius: 8px;
border-left: 3px solid var(--warn);
}
.image-dropzone {
border: 2px dashed var(--line-strong);
border-radius: 8px; padding: 24px;
text-align: center; background: var(--bg);
cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
position: relative;
}
.image-dropzone:hover { border-color: var(--ink); background: var(--bg-elevated); }
.image-dropzone.drag-over { border-color: var(--ink); background: var(--bg-elevated); transform: scale(1.01); }
.image-dropzone.has-image { padding: 0; border-style: solid; }
.image-dropzone-inner {
display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-soft);
}
.image-dropzone svg { color: var(--ink-mute); }
.image-dropzone .main-text { font-size: 13px; font-weight: 500; color: var(--ink); }
.image-dropzone .sub-text {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.08em; color: var(--ink-mute); text-transform: uppercase;
}
.image-preview { width: 100%; max-height: 220px; object-fit: contain; display: block; background: var(--bg-sunken); border-radius: 8px; }
.image-preview-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.image-preview-actions button {
background: rgba(22, 22, 15, 0.85); color: var(--bg); border: none;
padding: 5px 10px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
cursor: pointer; border-radius: 6px; text-transform: uppercase;
}
.image-preview-actions button:hover { background: var(--danger); }
.hidden-file { display: none; }
.modal-footer {
padding: 16px 24px; border-top: 1px solid var(--line);
display: flex; gap: 8px; justify-content: flex-end; background: var(--bg-sunken);
position: sticky;
bottom: 0;
z-index: 2;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
.modal-footer button {
padding: 9px 18px; border-radius: 6px;
font-family: var(--font-sans); font-size: 13px; font-weight: 500; cursor: pointer;
}
.modal-footer .cancel { border: 1px solid var(--line-strong); background: var(--bg-elevated); color: var(--ink); }
.modal-footer .confirm { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.modal-footer .danger { color: var(--danger); border: 1px solid var(--danger); background: var(--bg-elevated); margin-right: auto; }
.modal-footer .danger:hover { background: var(--danger); color: var(--bg-elevated); }
.outcome-options { display: flex; flex-direction: column; gap: 8px; }
.outcome-option {
padding: 12px 14px;
border: 1px solid var(--line-strong); border-radius: 6px;
cursor: pointer;
font-family: var(--font-sans); font-size: 13px;
color: var(--ink); transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.12s, opacity 0.12s, box-shadow 0.12s;
display: block; margin: 0;
}
.outcome-option:hover { border-color: var(--ink); background: var(--bg-sunken); }
.outcome-option input { display: none; }
.outcome-option:has(input:checked) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.outcome-option-title { font-weight: 500; margin-bottom: 3px; }
.outcome-option-desc { font-size: 11px; color: var(--ink-mute); font-family: var(--font-mono); }
.outcome-option:has(input:checked) .outcome-option-desc { color: rgba(250, 250, 247, 0.6); }
/* feedback-modal-centered-v2: 客户评语使用居中 Apple 风紧凑弹窗 */
.modal-backdrop.feedback-drawer {
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(0, 0, 0, 0.32);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.modal-backdrop.feedback-drawer .modal {
width: min(620px, calc(100vw - 48px));
max-width: 620px;
height: min(820px, calc(100dvh - 48px));
max-height: calc(100dvh - 48px);
border-radius: 20px !important;
display: flex;
flex-direction: column;
overflow: hidden;
animation: none;
transform: translateY(14px) scale(0.985);
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease-out;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16), 0 8px 18px rgba(0, 0, 0, 0.07);
}
.modal-backdrop.feedback-drawer.open .modal { transform: translateY(0) scale(1); }
.feedback-drawer .modal-header {
position: static;
padding: 16px 20px 14px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex: 0 0 auto;
}
.feedback-drawer .feedback-drawer-heading { min-width: 0; }
.feedback-drawer .modal-header h3 {
margin: 0;
font-family: var(--font-sans);
font-size: 18px;
line-height: 1.3;
font-style: normal;
font-weight: 700;
letter-spacing: 0;
}
.feedback-drawer .feedback-drawer-subtitle {
margin-top: 3px;
color: var(--ink-mute);
font-size: 12px;
line-height: 1.4;
}
.feedback-drawer .feedback-drawer-close {
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--ink-mute);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex: 0 0 auto;
}
.feedback-drawer .feedback-drawer-close:hover { background: var(--bg-sunken); color: var(--ink); }
.feedback-drawer .modal-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 16px 20px 20px;
gap: 14px;
}
.feedback-drawer .modal-body > .form-field { margin: 0; }
.feedback-drawer .form-field > label,
.feedback-drawer .feedback-section-label {
margin: 0 0 6px;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
color: var(--ink);
font-weight: 650;
}
.feedback-drawer .form-field input[type="date"] {
min-height: 42px;
padding: 9px 12px;
font-size: 14px;
background: var(--bg-elevated);
}
.feedback-po-state-control {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3px;
padding: 3px;
border: 1px solid var(--line);
border-radius: 11px;
overflow: visible;
background: var(--bg-sunken);
}
.feedback-po-state-control label {
position: relative;
min-height: 38px;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0;
border: 1px solid transparent;
border-radius: 8px;
color: var(--ink-soft);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
user-select: none;
}
.feedback-po-state-control input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
border: 0;
opacity: 0;
pointer-events: none;
}
.feedback-po-state-control label:has(input:checked) {
background: var(--accent-blue-bg, #E5F0FF);
color: var(--apple-blue, #007AFF);
border-color: rgba(0, 122, 255, 0.34);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
font-weight: 650;
}
.feedback-po-state-control label:has(input:focus-visible) {
outline: 2px solid rgba(0, 122, 255, 0.42);
outline-offset: 1px;
}
.feedback-po-state-control label:has(input:disabled) { color: var(--ink-mute); background: var(--bg-sunken); cursor: not-allowed; opacity: 0.6; }
.feedback-po-state-hint {
margin: 6px 0 0;
color: var(--ink-mute);
font-size: 11.5px;
line-height: 1.45;
}
.feedback-drawer .outcome-options { gap: 5px; }
.feedback-drawer .outcome-option {
position: relative;
min-height: 58px;
padding: 9px 42px 9px 12px;
border-color: var(--line);
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--bg-elevated);
}
.feedback-drawer .outcome-option:hover { border-color: var(--line-strong); background: var(--bg-hover); }
.feedback-drawer .outcome-option:has(input:checked) {
color: var(--apple-blue, #007AFF);
background: #F3F8FF;
border-color: var(--apple-blue, #007AFF);
box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.08);
}
.feedback-drawer .outcome-option input {
display: block;
position: absolute;
right: 13px;
top: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0;
padding: 0;
appearance: none;
-webkit-appearance: none;
border: 1.5px solid var(--line-strong) !important;
border-radius: 50% !important;
background: var(--bg-elevated) !important;
box-shadow: none !important;
cursor: pointer;
}
.feedback-drawer .outcome-option input:checked {
border: 2px solid var(--apple-blue, #007AFF) !important;
background: var(--apple-blue, #007AFF) !important;
box-shadow: inset 0 0 0 3px var(--bg-elevated) !important;
}
.feedback-drawer .outcome-option input:focus {
outline: none !important;
box-shadow: none !important;
}
.feedback-drawer .outcome-option input:checked:focus {
box-shadow: inset 0 0 0 3px var(--bg-elevated) !important;
}
.feedback-drawer .outcome-option input:focus-visible {
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18) !important;
}
.feedback-drawer .outcome-option input:checked:focus-visible {
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18), inset 0 0 0 3px var(--bg-elevated) !important;
}
.feedback-drawer .outcome-option-title { margin: 0 0 2px; font-size: 13px; font-weight: 650; line-height: 1.35; letter-spacing: 0; }
.feedback-drawer .outcome-option-desc,
.feedback-drawer .outcome-option:has(input:checked) .outcome-option-desc {
color: var(--ink-mute);
font-family: var(--font-sans);
font-size: 11.5px;
line-height: 1.4;
}
.feedback-field-help { margin: -2px 0 7px; color: var(--ink-mute); font-size: 11.5px; line-height: 1.4; }
.feedback-drawer #u-feedback-note-editor .rich-editor-content { min-height: 108px; max-height: 180px; }
.feedback-material-details {
border: 1px solid var(--line);
border-radius: 9px;
background: #FAFAFC;
overflow: hidden;
}
.feedback-material-details summary {
min-height: 56px;
padding: 10px 12px;
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
list-style: none;
position: relative;
}
.feedback-material-details summary::-webkit-details-marker { display: none; }
.feedback-material-details summary::after {
content: '';
position: absolute;
right: 14px;
top: 50%;
width: 7px;
height: 7px;
border-right: 1.5px solid var(--ink-mute);
border-bottom: 1.5px solid var(--ink-mute);
transform: translateY(-70%) rotate(45deg);
}
.feedback-material-details[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.feedback-material-summary-title { padding-right: 28px; color: var(--ink); font-size: 12.5px; font-weight: 650; }
.feedback-material-summary-desc { padding-right: 28px; margin-top: 3px; color: var(--ink-mute); font-size: 11.5px; }
.feedback-material-details-body { padding: 12px; border-top: 1px solid var(--line); background: var(--bg-elevated); }
.feedback-material-details-body .form-field { margin: 0 0 10px; }
.feedback-material-details-body .form-field:last-child { margin-bottom: 0; }
.feedback-sync-row {
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 9px;
background: #FAFAFC;
}
.feedback-sync-row label { display: flex !important; align-items: flex-start; gap: 9px; margin: 0 !important; cursor: pointer; }
.feedback-sync-row input { width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--apple-blue, #007AFF); }
.feedback-sync-title { color: var(--ink); font-size: 12.5px; font-weight: 550; line-height: 1.4; }
.feedback-sync-desc { margin-top: 2px; color: var(--ink-mute); font-size: 11.5px; line-height: 1.4; }
.feedback-conditional-section[hidden] { display: none !important; }
.feedback-drawer .modal-footer {
position: static;
flex: 0 0 auto;
padding: 14px 20px;
background: var(--bg-elevated);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.feedback-drawer .modal-footer button { min-height: 42px; padding: 9px 18px; font-size: 13px; }
.feedback-drawer .modal-footer .cancel { background: var(--bg-sunken); border-color: transparent; }
.feedback-drawer .modal-footer .confirm { min-width: 164px; }
@media (max-width: 680px) {
.modal-backdrop.feedback-drawer { padding: 12px; }
.modal-backdrop.feedback-drawer .modal {
width: calc(100vw - 24px);
max-width: calc(100vw - 24px);
height: min(840px, calc(100dvh - 24px));
max-height: calc(100dvh - 24px);
border-radius: 18px !important;
}
.feedback-drawer .modal-header { padding-inline: 16px; }
.feedback-drawer .modal-body { padding-inline: 16px; }
.feedback-drawer .modal-footer {
padding-inline: 16px;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
}
}
/* 大货跟进列表样式 */
.production-list {
display: flex; flex-direction: column; gap: 0;
border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
background: var(--bg-elevated);
}
.production-row {
display: grid;
/* checkbox | 图 | PO号 | 条形号 | 客户 | 跟单 | 新反 | 颜色·数量 | 货期 | 样板进度 | → */
grid-template-columns: 32px 60px 130px 110px 80px 90px 60px 130px 110px 1fr 24px;
gap: 12px; padding: 12px 16px;
background: var(--bg-elevated); align-items: center; cursor: pointer;
border-bottom: 1px solid var(--line);
transition: background 0.12s ease;
}
.production-row:last-child { border-bottom: none; }
.production-row:hover { background: var(--bg-hover); }
/* 紧迫度 gradient(替代 side-stripe ban)*/
.production-row.urgent-danger {
background: linear-gradient(to right, var(--danger-bg) 0%, var(--danger-bg) 4px, var(--bg-elevated) 6px) !important;
}
.production-row.urgent-warn {
background: linear-gradient(to right, var(--warn-bg) 0%, var(--warn-bg) 4px, var(--bg-elevated) 6px) !important;
}
.production-list-header {
display: grid;
grid-template-columns: 32px 60px 130px 110px 80px 90px 60px 130px 110px 1fr 24px;
gap: 12px; padding: 10px 16px;
background: var(--bg-sunken); border-bottom: 1px solid var(--line);
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--ink-mute); font-weight: 500;
}
.po-cell {
display: flex; flex-direction: column; gap: 2px;
}
.po-cell .po-num {
font-family: var(--font-mono); font-size: 13px;
font-weight: 500; color: var(--ink);
}
.po-cell .po-qty {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute);
}
.po-cell .po-color-text {
font-size: 13px;
color: var(--ink);
font-weight: 500;
}
.po-cell .po-color-qty {
font-size: 13px;
color: var(--ink);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.po-cell-sub {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 大货跟进列表新增的列 */
.prod-row-thumb {
width: 36px;
height: 46px;
object-fit: cover;
border-radius: 4px;
border: 1px solid var(--line);
cursor: zoom-in;
transition: transform 0.1s;
}
.prod-row-thumb:hover {
transform: scale(1.06);
border-color: var(--accent);
}
.prod-barcode-cell {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.prod-owner-cell {
font-size: 13px;
color: var(--ink);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.prod-order-type-cell {
display: flex;
align-items: center;
}
.empty-dash {
font-family: var(--font-mono);
color: var(--ink-mute);
font-size: 12px;
}
/* 大货跟进列表的"样板进度"列 — 节点名 + 阶段 inline 标签 */
.prod-node-line {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
min-width: 0;
}
.prod-node-line .node-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
font-weight: 500;
}
.prod-node-line .node-name.danger { color: var(--danger); font-weight: 600; }
.prod-node-line .node-name.warn { color: var(--warn); font-weight: 600; }
.prod-node-line .node-name.done { color: var(--ok); }
.prod-stage-inline {
display: inline-flex;
align-items: center;
padding: 1px 7px;
border-radius: 9px;
font-size: 11px;
font-family: var(--font-sans);
font-weight: 500;
letter-spacing: 0.02em;
white-space: nowrap;
flex-shrink: 0;
}
.prod-stage-inline.stage-dev {
background: var(--stage-dev-bg, #F1ECF8);
color: var(--stage-dev, #7B61C7);
}
.prod-stage-inline.stage-revise {
background: var(--stage-revise-bg, #F8EFE0);
color: var(--stage-revise, #C68A3A);
}
.prod-stage-inline.stage-prod {
background: var(--stage-prod-bg, #E0EBF8);
color: var(--stage-prod, #3A75C6);
}
.prod-stage-inline.stage-await-fit {
background: var(--warn-bg);
color: var(--warn);
}
.prod-stage-inline.stage-done {
background: var(--ok-bg);
color: var(--ok);
}
.exfactory-cell {
display: flex; flex-direction: column; gap: 2px;
}
.exfactory-date {
font-family: var(--font-mono); font-size: 12px;
font-weight: 500; color: var(--ink);
}
.exfactory-countdown {
font-family: var(--font-mono); font-size: 11px;
font-weight: 500;
}
.exfactory-countdown.urgent-danger { color: var(--danger); }
.exfactory-countdown.urgent-warn { color: var(--warn); }
.exfactory-countdown.urgent-ok { color: var(--ok); }
.exfactory-countdown.urgent-overdue { color: var(--danger); font-weight: 600; }
.alert-banner {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 6px;
font-family: var(--font-mono); font-size: 11px;
font-weight: 500; margin-top: 6px;
}
.alert-banner.danger { background: var(--danger-bg); color: var(--danger); }
.alert-banner.warn { background: var(--warn-bg); color: var(--warn); }
.alert-banner.ok { background: var(--ok-bg); color: var(--ok); }
.empty { padding: 80px 20px; text-align: center; color: var(--ink-mute); }
.empty h3 { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: 26px; color: var(--ink); margin-bottom: 8px; }
.empty p { font-size: 14px; margin-bottom: 20px; }
.storage-notice {
position: fixed; bottom: 12px; right: 16px;
background: var(--bg-elevated); border: 1px solid var(--line-strong);
padding: 8px 12px;
font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
border-radius: 6px; letter-spacing: 0.04em;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.storage-notice b { color: var(--warn); font-weight: 500; }
@media (max-width: 1100px) {
.style-row, .list-header { grid-template-columns: 70px 90px 80px 160px 1fr 80px 36px; }
}
@media (max-width: 900px) {
.list-header, .production-list-header { display: none; }
.style-row, .production-row { grid-template-columns: 60px 1fr; gap: 12px; padding: 12px; }
.style-row > *:nth-child(n+3), .production-row > *:nth-child(n+3) { grid-column: 2; }
.thumb, .thumb-placeholder { width: 50px; height: 66px; }
.drawer { width: 100%; }
.header-stats { display: none; }
.board { grid-template-columns: repeat(5, 220px); }
}
.show-po-toggle {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
letter-spacing: 0.04em; cursor: pointer;
padding: 5px 10px;
border: 1px solid var(--line-strong); border-radius: 6px;
background: var(--bg-elevated);
}
.show-po-toggle:hover { color: var(--ink); border-color: var(--ink); }
.show-po-toggle input { margin: 0; cursor: pointer; }
.show-po-toggle input:checked + span { color: var(--ink); font-weight: 600; }
/* 简化版列表行：只显示当前节点 + 停留 + 阶段进度小条 */
.list-header.simplified, .style-row.simplified {
grid-template-columns: 80px 110px 90px 1fr 1fr 100px 36px;
}
.current-node-display {
display: flex; flex-direction: column; gap: 4px;
min-width: 0;
}
.current-node-display .node-name {
font-family: var(--font-sans); font-size: 13px;
font-weight: 500; color: var(--ink);
}
.current-node-display .node-name.danger { color: var(--danger); }
.current-node-display .node-name.warn { color: var(--warn); }
.current-node-display .node-stage {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute); letter-spacing: 0.04em;
text-transform: uppercase;
}
/* 大货跟进分组标题 */
.production-group {
margin-bottom: 28px;
}
.production-group-header {
display: flex; align-items: center; gap: 12px;
padding: 0 4px;
margin-bottom: 12px;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.1em; text-transform: uppercase;
font-weight: 600;
}
.production-group-header.danger-group { color: var(--danger); }
.production-group-header.warn-group { color: var(--warn); }
.production-group-header.ok-group { color: var(--ok-soft, var(--ink-soft)); }
.production-group-header .count {
background: var(--bg-elevated);
color: var(--ink); padding: 2px 8px;
border-radius: 10px; font-size: 11px;
border: 1px solid var(--line-strong);
}
.production-group-header.danger-group .count { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bg); }
.production-group-header.warn-group .count { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-bg); }
/* 大货跟进行加节点信息 */
/* 大货列表 v2 — 6 列简表 + 大货进度(对齐 mock-prod.html)
checkbox | 图 | PO 主+副 | 客户·组·工厂 | 颜色·数量 | EX货期+大货进度 | → */
.production-row.with-node {
grid-template-columns: 28px 40px minmax(140px, 1fr) 130px 130px 150px 20px;
gap: 12px; padding: 12px 14px;
font-size: 13px;
}
.production-list-header.with-node {
grid-template-columns: 28px 40px minmax(140px, 1fr) 130px 130px 150px 20px;
gap: 12px; padding: 10px 14px;
font-size: 11px;
}
/* 新单元格样式 */
.prod-cell-main {
display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.prod-cell-main .po-num-main {
font-family: var(--font-sans); font-weight: 700; font-size: 14px;
color: var(--ink); letter-spacing: -0.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
display: block;
}
.prod-cell-main .po-barcode-inline {
font-weight: 500; color: var(--ink-soft);
}
.prod-cell-main .po-sub {
font-size: 12px; color: var(--ink-mute);
display: flex; gap: 6px; align-items: center;
font-family: var(--font-sans);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
min-width: 0;
}
.prod-cell-main .po-style-no {
font-family: var(--font-sans);
color: var(--ink-soft);
overflow: hidden; text-overflow: ellipsis;
}
.prod-cell-main .po-owner {
color: var(--ink-mute);
flex-shrink: 0;
}
.prod-cell-main .po-owner::before {
content: "·"; margin-right: 6px; color: var(--ink-mute);
}
.prod-cell-main .po-sub > :first-child.po-owner::before {
content: ""; margin-right: 0;
}
.prod-cell-meta {
display: flex; flex-direction: column; gap: 3px;
font-size: 11px;
}
.prod-cell-meta-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* 大货行内的 chip 紧凑统一(对齐 mock 1px 7px) */
.prod-cell-meta .client-badge,
.prod-cell-meta .group-badge,
.prod-cell-meta .factory-badge,
.prod-cell-meta .order-type-pill {
padding: 1px 7px;
font-size: 11px;
line-height: 1.45;
margin: 0;
}
.prod-cell-colors {
display: flex; flex-direction: column; gap: 2px;
font-family: var(--font-mono); font-size: 12px;
min-width: 0;
}
.prod-cell-colors .color-line { display: flex; gap: 6px; align-items: baseline; }
.prod-cell-colors .color-name { font-weight: 500; color: var(--ink); }
.prod-cell-colors .color-qty { color: var(--ink-mute); font-size: 11px; }
.prod-cell-progress {
display: flex; flex-direction: column; gap: 4px;
min-width: 0;
}
.prod-cell-progress .ef-row {
display: flex; gap: 6px; align-items: baseline;
font-size: 12px;
flex-wrap: wrap;
}
.prod-cell-progress .ef-date {
font-family: var(--font-mono); color: var(--ink); font-weight: 500;
}
.prod-cell-progress .ef-countdown {
font-family: var(--font-sans); font-size: 11px; font-weight: 600;
}
.prod-cell-progress .ef-countdown.danger { color: var(--danger); }
.prod-cell-progress .ef-countdown.warn { color: var(--warn); }
.prod-cell-progress .ef-countdown.ok { color: var(--ink-mute); }
.prod-cell-progress .ef-countdown.done { color: var(--ok); }
.prod-progress-bar {
height: 6px;
background: var(--bg-sunken);
border-radius: 999px;
overflow: hidden;
}
.prod-progress-fill {
height: 100%;
background: var(--apple-blue);
border-radius: 999px;
transition: width 0.3s ease;
}
.prod-progress-fill.done { background: var(--ok); }
.prod-progress-fill.danger { background: var(--danger); }
.prod-progress-text {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.01em;
}
.prod-progress-text.done { color: var(--ok); font-weight: 600; }
.prod-progress-text.late { color: var(--warn); font-weight: 650; }
.prod-progress-text.pending-qc { color: var(--warn); font-weight: 650; }
.prod-group-cell, .prod-factory-cell {
display: flex;
align-items: center;
min-width: 0;
}
.prod-group-cell .group-badge,
.prod-factory-cell .factory-badge {
font-size: 10.5px;
padding: 2px 6px;
letter-spacing: 0.02em;
}
.production-current-node {
display: flex; flex-direction: column; gap: 3px;
min-width: 0;
}
.production-current-node .node-name {
font-family: var(--font-sans); font-size: 13px;
font-weight: 500; color: var(--ink);
}
.production-current-node .node-name.danger { color: var(--danger); }
.production-current-node .node-name.warn { color: var(--warn); }
.production-current-node .stage-pill-row {
display: flex; gap: 6px; align-items: center;
}
/* 备注 */
.notes-section {
margin-bottom: 20px;
padding: 14px;
background: var(--bg-elevated);
border-radius: 8px;
border: 1px solid var(--line);
}
.notes-section textarea {
width: 100%;
min-height: 60px;
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
padding: 8px 10px;
font-family: var(--font-sans); font-size: 13px; color: var(--ink);
border-radius: 6px; outline: none; resize: vertical;
}
.notes-section textarea:focus { border-color: var(--ink); }
.notes-empty {
color: var(--ink-mute);
font-size: 13px;
cursor: pointer;
padding: 0;
}
.drawer-empty-state {
min-height: 78px;
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
text-align: center;
background: var(--bg-sunken);
border: 1px dashed var(--line-strong);
border-radius: 8px;
color: var(--ink-mute);
}
.drawer-empty-state.is-compact {
min-height: 58px;
padding: 12px 14px;
}
.drawer-empty-state.is-action {
cursor: pointer;
transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.drawer-empty-state.is-action:hover {
background: var(--bg-hover);
border-color: var(--ink-soft);
}
.drawer-empty-title {
font-size: 13px;
font-weight: 600;
color: var(--ink-soft);
}
.drawer-empty-sub {
font-size: 12px;
line-height: 1.45;
color: var(--ink-mute);
}
.notes-display {
font-size: 13px; color: var(--ink);
line-height: 1.5; white-space: pre-wrap;
padding: 4px 0;
cursor: pointer;
}
.notes-display:hover { color: var(--ink-soft); }
.notes-edit-btn {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--ink-mute); cursor: pointer;
margin-top: 4px;
}
.notes-edit-btn:hover { color: var(--ink); }
/* 今日跟进 tab 的 count 标记带颜色 */
.top-tab .count.today-count {
background: var(--bg-sunken);
color: var(--ink-soft);
}
.top-tab .count.today-count.has-danger {
background: var(--danger-bg);
color: var(--danger);
}
.top-tab .count.today-count.has-warn {
background: var(--warn-bg);
color: var(--warn);
}
.top-tab.active .count.today-count {
background: var(--ink); color: var(--bg);
}
.top-tab.active .count.today-count.has-danger {
background: var(--danger); color: white;
}
/* 今日跟进页面新设计 - 大卡片 */
.today-page {
display: flex; flex-direction: column;
gap: 32px;
/* 撑满 main 可用宽度，覆盖 main#main > * 的默认 max-width: 1600px + 居中
避免大屏 / 折叠态出现两侧大块空白 */
max-width: none;
margin-left: 0;
margin-right: 0;
width: 100%;
}
.today-scroll-region {
display: flex;
flex-direction: column;
gap: 32px;
min-width: 0;
}
.today-section h2 {
font-family: var(--font-serif); font-style: italic;
font-size: 24px; font-weight: 400;
margin-bottom: 4px;
display: flex; align-items: baseline; gap: 12px;
}
.today-section h2 .count-badge {
font-family: var(--font-mono); font-size: 13px;
letter-spacing: 0.04em; font-weight: 500;
font-style: normal;
padding: 3px 10px;
border-radius: 12px;
background: var(--bg-sunken); color: var(--ink-soft);
}
.today-section h2 .count-badge.danger { background: var(--danger-bg); color: var(--danger); }
.today-section h2 .count-badge.warn { background: var(--warn-bg); color: var(--warn); }
.today-section .section-sub {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.06em; color: var(--ink-mute);
margin-bottom: 14px;
}
/* 子分组分隔线（已下 PO / 开发中）*/
.subgroup-divider {
display: flex;
align-items: center;
gap: 10px;
margin: 18px 0 10px 0;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
}
.subgroup-divider:first-child { margin-top: 0; }
.subgroup-divider .label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 14px;
white-space: nowrap;
}
.subgroup-divider .label.po-active {
background: var(--danger-bg);
color: var(--danger);
}
.subgroup-divider .label.dev-only {
background: var(--bg-sunken);
color: var(--ink-soft);
}
.subgroup-divider .label .count {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
opacity: 0.85;
}
.subgroup-divider .hint {
font-size: 11px;
font-weight: 400;
color: var(--ink-mute);
font-family: var(--font-mono);
}
.subgroup-divider .line {
flex: 1;
height: 1px;
background: var(--line);
}
.subgroup-empty {
padding: 12px 14px;
font-size: 12px;
color: var(--ink-mute);
font-family: var(--font-mono);
background: var(--bg-sunken);
border-radius: 6px;
margin-bottom: 8px;
}
/* pm-subgroup-3way-v1 · 板师 tab 已下 PO 下分 3 类 · 折叠子组 */
.pm-subgroup {
border: 1px solid var(--line);
border-radius: 10px;
margin: 10px 0 12px 0;
overflow: hidden;
}
.pm-subgroup-h {
padding: 9px 14px;
display: flex; align-items: center; gap: 10px;
background: var(--bg-sunken);
cursor: pointer;
border-bottom: 1px solid var(--line);
user-select: none;
}
.pm-subgroup-h .chev {
font-size: 11px; color: var(--ink-mute);
transition: transform 0.15s;
display: inline-block;
}
.pm-subgroup.collapsed .pm-subgroup-h .chev { transform: rotate(-90deg); }
.pm-subgroup-h .title {
font-size: 13.5px; font-weight: 600;
color: var(--ink);
}
.pm-subgroup-h .count {
font-family: var(--font-mono); font-weight: 600;
padding: 1px 8px; border-radius: 8px;
font-size: 11.5px;
}
.pm-subgroup-h .desc {
font-size: 11.5px; color: var(--ink-mute);
margin-left: auto;
font-weight: 400;
}
.pm-subgroup.revise .pm-subgroup-h { background: linear-gradient(to right, #FFF7ED 0%, var(--bg-elevated) 100%); }
.pm-subgroup.revise .pm-subgroup-h .count { background: #FED7AA; color: #C2410C; }
.pm-subgroup.photo .pm-subgroup-h { background: linear-gradient(to right, #EFF6FF 0%, var(--bg-elevated) 100%); }
.pm-subgroup.photo .pm-subgroup-h .count { background: #DBEAFE; color: #1E40AF; }
.pm-subgroup.grading .pm-subgroup-h { background: linear-gradient(to right, #F0FDF4 0%, var(--bg-elevated) 100%); }
.pm-subgroup.grading .pm-subgroup-h .count { background: #DCFCE7; color: #15803D; }
/* pm-bucket-dev-fix-v1: 开发·打版中 子桶(中性 slate · 对应「常规优先级」) */
.pm-subgroup.dev .pm-subgroup-h { background: linear-gradient(to right, #F8FAFC 0%, var(--bg-elevated) 100%); }
.pm-subgroup.dev .pm-subgroup-h .count { background: #E2E8F0; color: #475569; }
.pm-subgroup-body {
padding: 12px 12px 4px 12px;
background: var(--bg-elevated);
}
.pm-subgroup.collapsed .pm-subgroup-body { display: none; }
.pm-subgroup.collapsed .pm-subgroup-h { border-bottom-color: transparent; }
.today-cards {
display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 12px;
}
/* perf-v1 (2026-06-01 用户·弱机卡顿): 减每帧渲染负担 · 不改业务/布局 */
/* ① 离屏列表项不渲染(纯 CSS 虚拟化)· 弱机滚长列表省 GPU/CPU 大头 */
/* perf-cv-size-v2 (2026-06-02): 把 contain-intrinsic-size 估值从 96px(只算缩略图高)抬到 ~150px(贴近真实卡高:缩略图+款名+换行徽章+状态+按钮)。
过小的估值会让 content-visibility 在滚动时,离屏卡进视口才按真高撑开 → 滚动条/网格行高不断重算 → 弱机滚动卡(款越多越明显,正是采购/生产 tab)。 */
.today-card { content-visibility: auto; contain-intrinsic-size: auto 150px; }
.gallery-card { content-visibility: auto; contain-intrinsic-size: auto 240px; }
.po-row { content-visibility: auto; contain-intrinsic-size: auto 52px; }
.style-row { content-visibility: auto; contain-intrinsic-size: auto 64px; } /* 开发追踪/历史档案的行 */
/* print-cv-fix-v1 (2026-06-02 用户·样版单 Chrome 直印漏字): Chromium 打印管线遇到 content-visibility:auto
会漏渲染文字(屏幕正常、系统对话框/PDF 正常,只有 Chrome 内置打印预览只剩边框+图)。打印时强制全部 visible、
关掉离屏跳过 → 文字回来。打印本就渲染整页,无副作用。这就是上面那几条 content-visibility 引入后才出现的直印 bug 的解药。 */
@media print { * { content-visibility: visible !important; } }
/* dev-month-paging-v1: 月内「显示更多」按钮 */
.dev-more-btn { display:block; width:100%; margin:8px 0 2px; padding:9px 0; border:1px dashed var(--line-strong,#d2d2d7); border-radius:9px; background:var(--bg-elevated,#fafafa); color:var(--ink-soft,#6e6e73); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.dev-more-btn:hover { background:var(--bg-hover,#f0f0f3); color:var(--ink,#1d1d1f); }
/* ② 关装饰性无限动画(滚动持续重绘大头)· 只是不再闪烁,颜色高亮仍在 */
.days-warn .days-indicator, .days-danger .days-indicator,
.today-card-ef.ef-overdue, .today-card-ef.ef-danger,
.flow-node.current-warn, .flow-node.current-danger,
.big-flow-dot.current-warn, .big-flow-dot.current-danger { animation: none !important; }
/* ③ 全局去毛玻璃模糊(弱机头号杀手 · 办公工具不需要磨砂特效)· 半透明背景仍在,只是不模糊 */
* { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* purchase-v2-staging: 新版采购看板(灰度 · 大货布/打板布 两组) */
/* no-autorefresh-v1: 实时同步"点击刷新"条(灰度 gc_no_autorefresh='on') */
.gc-refresh-banner{ position:fixed; top:-52px; left:50%; transform:translateX(-50%); z-index:11000;
display:inline-flex; align-items:center; gap:8px;
background:#0a84ff; color:#fff; font-size:13px; font-weight:650; padding:8px 18px;
border-radius:0 0 13px 13px; box-shadow:0 4px 16px rgba(10,132,255,.32); cursor:pointer;
transition:top .25s ease; user-select:none; }
.gc-refresh-banner.show{ top:0; }
.gc-refresh-banner:hover{ background:#0070e6; }
.gc-refresh-banner:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(0,122,255,.36),0 4px 16px rgba(10,132,255,.32); }
.gc-refresh-banner .gc-refresh-banner-sub{ font-size:12px; font-weight:500; opacity:.88; }
/* admin-panel-v2: 系统管理 tab(日志 + 用户管理) */
.admin-wrap{ padding:6px 2px 50px; max-width:1280px; }
.admin-page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:0 0 18px; }
.admin-kicker{ font-size:12px; font-weight:700; color:#0a84ff; margin-bottom:4px; }
.admin-page-head h2{ margin:0; color:#1c1c1e; font-size:22px; line-height:1.2; letter-spacing:0; }
.admin-page-head p{ margin:6px 0 0; color:#6b6b70; font-size:13px; }
.admin-sec{ background:#fff; border:1px solid #e6e6ea; border-radius:14px; padding:18px 20px; margin-bottom:16px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.admin-h{ font-size:15px; font-weight:700; color:#1c1c1e; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.admin-sub{ font-size:12px; font-weight:500; color:#9a9aa0; }
.admin-h-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.admin-storage-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.admin-storage-card{ border:1px solid #eeeeF2; background:#fbfbfc; border-radius:12px; padding:14px 15px; min-width:0; }
.admin-storage-card .lbl{ color:#8e8e93; font-size:12px; font-weight:700; margin-bottom:7px; }
.admin-storage-card .num{ color:#1c1c1e; font-size:22px; font-weight:760; line-height:1; font-variant-numeric:tabular-nums; }
.admin-storage-card .sub{ color:#8e8e93; font-size:11.5px; margin-top:7px; line-height:1.35; word-break:break-word; }
.admin-storage-card.warn{ border-color:#ffe8ad; background:#fffaf0; }
.admin-storage-card.danger{ border-color:#ffd2cc; background:#fff8f7; }
.admin-storage-bar{ height:8px; border-radius:999px; background:#ececf0; overflow:hidden; margin-top:10px; }
.admin-storage-bar span{ display:block; height:100%; border-radius:999px; background:#0a84ff; }
.admin-storage-bar span.warn{ background:#b25400; }
.admin-storage-bar span.danger{ background:#d70015; }
.admin-storage-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.admin-storage-list{ border:1px solid #f0f0f3; border-radius:12px; overflow:hidden; }
.admin-storage-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid #f3f3f5; font-size:13px; }
.admin-storage-row:last-child{ border-bottom:0; }
.admin-storage-row .name{ color:#1c1c1e; font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-storage-row .meta{ color:#8e8e93; font-size:12px; white-space:nowrap; }
.admin-storage-row .size{ color:#1c1c1e; font-weight:760; font-variant-numeric:tabular-nums; white-space:nowrap; }
.admin-storage-mini-title{ color:#6b6b70; font-size:12px; font-weight:800; margin:2px 0 8px; }
.admin-storage-path{ font-family:ui-monospace,Menlo,monospace; color:#6b6b70; font-size:11.5px; word-break:break-all; }
.admin-storage-note{ margin:0 0 12px; padding:10px 12px; border:1px solid #e6e6ea; background:#fbfbfc; border-radius:10px; color:#6b6b70; font-size:12.5px; line-height:1.55; }
.admin-storage-note.warn{ border-color:#ffe8ad; background:#fffaf0; color:#8a4d00; }
.admin-storage-note.danger{ border-color:#ffd2cc; background:#fff8f7; color:#b42318; }
.admin-refresh,.admin-add,.admin-primary{ font-family:inherit; font-size:12px; border:1px solid #0a84ff; color:#0a84ff; background:rgba(10,132,255,.08); border-radius:8px; padding:6px 12px; cursor:pointer; font-weight:600; transition:background .16s ease,border-color .16s ease,color .16s ease; }
.admin-refresh:hover,.admin-add:hover{ background:rgba(10,132,255,.13); }
.admin-primary{ background:#0a84ff; color:#fff; padding:9px 15px; border-radius:10px; white-space:nowrap; box-shadow:0 5px 14px rgba(10,132,255,.20); }
.admin-primary:hover{ background:#0070e6; border-color:#0070e6; }
.admin-table-wrap{ overflow:auto; border:1px solid #f0f0f3; border-radius:12px; }
.admin-tbl{ width:100%; min-width:780px; border-collapse:collapse; font-size:13px; }
.admin-tbl th{ text-align:left; color:#8e8e93; font-weight:700; font-size:12px; padding:10px 12px; border-bottom:1px solid #eee; white-space:nowrap; background:#fbfbfc; }
.admin-tbl td{ padding:11px 12px; border-bottom:1px solid #f3f3f5; vertical-align:middle; color:#1c1c1e; }
.admin-tbl tr:last-child td{ border-bottom:0; }
.admin-user-cell b{ display:block; font-size:13.5px; color:#1c1c1e; }
.admin-user-cell span{ display:block; margin-top:2px; color:#9a9aa0; font-size:11.5px; }
.admin-role-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid transparent; white-space:nowrap; }
.admin-role-pill i{ font-style:normal; color:inherit; opacity:.72; font-weight:600; }
.admin-role-admin{ background:#f3edff; color:#6d28d9; border-color:#e3d4ff; }
.admin-role-followup{ background:#eaf3ff; color:#0b65c2; border-color:#d4e7ff; }
.admin-role-prod{ background:#fff6df; color:#936100; border-color:#ffe8ad; }
.admin-role-pattern{ background:#eef2f7; color:#475569; border-color:#dce4ee; }
.admin-role-fabric{ background:#e9f8f0; color:#147a42; border-color:#cbeed8; }
.admin-role-shipping{ background:#eaf7ff; color:#087399; border-color:#ccecff; }
.admin-role-workshop{ background:#f2f4f8; color:#596171; border-color:#e0e5ee; }
.admin-role-chedban{ background:#fff1ef; color:#b24332; border-color:#ffd8d1; }
.admin-role-other{ background:#f3f4f6; color:#6b7280; border-color:#e5e7eb; }
.admin-role-desc{ display:block; color:#9a9aa0; font-size:11.5px; margin-top:5px; }
.admin-acts{ display:flex; gap:6px; flex-wrap:wrap; }
.admin-acts button{ font-family:inherit; font-size:11.5px; border:1px solid #d8d8de; background:#fff; border-radius:7px; padding:4px 9px; cursor:pointer; color:#1c1c1e; }
.admin-acts button:hover{ background:#f7f7f9; }
.admin-acts button.danger{ border-color:#ffd2cc; color:#c0392b; background:#fff8f7; }
.admin-acts button.danger:hover{ background:#fff1ef; }
.admin-muted{ color:#9a9aa0; }
.admin-filterbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:-2px 0 14px; padding:11px 12px; border:1px solid #eeeeF2; border-radius:12px; background:#fafafb; }
.admin-filterbar select,.admin-filterbar input{ font-family:inherit; font-size:12.5px; padding:7px 10px; border:1px solid #d8d8de; border-radius:8px; background:#fff; outline:none; color:#1c1c1e; }
.admin-filterbar input{ min-width:180px; flex:1; max-width:320px; }
.admin-filterbar select:focus,.admin-filterbar input:focus{ border-color:#0a84ff; box-shadow:0 0 0 3px rgba(10,132,255,.11); }
.admin-filterbar .admin-search-clear{ border:1px solid #d8d8de; border-radius:8px; background:#fff; color:#6e6e73; padding:7px 10px; font:inherit; font-size:12px; cursor:pointer; }
.admin-filterbar .admin-search-clear:hover{ border-color:#0a84ff; color:#005ecb; }
.admin-check{ display:flex; align-items:center; gap:6px; color:#6b6b70; font-size:12.5px; user-select:none; cursor:pointer; }
.admin-check input{ width:auto; min-width:0; }
.admin-action-chip{ display:inline-flex; align-items:center; padding:3px 9px; border-radius:8px; font-size:12px; font-weight:700; white-space:nowrap; }
.admin-act-login{ background:#f1f5f9; color:#64748b; }
.admin-act-fail{ background:#fee2e2; color:#b91c1c; }
.admin-act-user{ background:#f3edff; color:#6d28d9; }
.admin-act-style{ background:#eaf3ff; color:#0b65c2; }
.admin-act-delete{ background:#fff1ef; color:#c0392b; }
.admin-act-photo{ background:#f6f0ff; color:#7c3aed; }
.admin-act-other{ background:#f3f4f6; color:#4b5563; }
.admin-log-main{ color:#1c1c1e; font-weight:600; }
.admin-log-sub{ margin-top:3px; color:#6b6b70; font-size:12px; line-height:1.35; max-width:620px; word-break:break-word; }
.admin-time-main{ display:block; white-space:nowrap; color:#1c1c1e; }
.admin-time-sub{ display:block; margin-top:2px; white-space:nowrap; color:#9a9aa0; font-size:11.5px; }
.admin-ip{ font-family:ui-monospace,Menlo,monospace; color:#6b6b70; font-size:12px; white-space:nowrap; }
.admin-empty{ padding:34px 16px; color:#9a9aa0; text-align:center; }
.admin-loading,.admin-err{ padding:46px; text-align:center; color:#9a9aa0; }
.admin-err{ color:#c0392b; }
.admin-state{ border:1px solid #eeeeF2; background:#fbfbfc; border-radius:12px; padding:34px 18px; text-align:center; color:#6b6b70; }
.admin-state .admin-state-title{ font-size:14px; font-weight:760; color:#1c1c1e; margin-bottom:5px; }
.admin-state .admin-state-sub{ font-size:12.5px; color:#8e8e93; line-height:1.45; }
.admin-state.is-error{ border-color:#ffd2cc; background:#fff8f7; color:#b42318; }
.admin-state.is-error .admin-state-title{ color:#b42318; }
.admin-state.is-loading .admin-state-title::before{ content:''; display:inline-block; width:9px; height:9px; border-radius:50%; background:#0a84ff; margin-right:8px; vertical-align:1px; animation:adminPulse 1s ease-in-out infinite; }
@keyframes adminPulse{ 0%,100%{ opacity:.35; transform:scale(.85); } 50%{ opacity:1; transform:scale(1); } }
.admin-form-dialog{ width:min(420px,calc(100vw - 32px)); }
.admin-form{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.admin-field label{ display:block; color:#8e8e93; font-size:12px; font-weight:700; margin-bottom:6px; }
.admin-field input,.admin-field select{ width:100%; box-sizing:border-box; font-family:inherit; font-size:13.5px; padding:9px 11px; border:1px solid #d8d8de; border-radius:9px; background:#fff; color:#1c1c1e; outline:none; }
.admin-field input:focus,.admin-field select:focus{ border-color:#0a84ff; box-shadow:0 0 0 3px rgba(10,132,255,.11); }
.admin-field-hint{ color:#9a9aa0; font-size:11.5px; margin-top:5px; line-height:1.35; }
@media(max-width:760px){
.admin-page-head{ flex-direction:column; }
.admin-primary{ width:100%; }
.admin-sec{ padding:15px; }
.admin-filterbar input{ max-width:none; min-width:100%; }
.admin-storage-grid{ grid-template-columns:1fr 1fr; }
.admin-storage-split{ grid-template-columns:1fr; }
.admin-storage-row{ grid-template-columns:minmax(0,1fr) auto; }
.admin-storage-row .meta{ display:none; }
}
/* production-qc-main-css-split-v1: pq2 production/QC ledger CSS moved to /gc-production-qc.css. */
.pv2-summary { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 16px; }
.pv2-sm { font-size:12.5px; font-weight:700; padding:6px 13px; border-radius:10px; white-space:nowrap; }
.pv2-sm.gap { flex:1; background:none; padding:0; }
.pv2-sm.bulk{ background:#fdeef0; color:#d70015; }
.pv2-sm.samp{ background:#eaf6ec; color:#1a7f37; }
.pv2-sm.hint{ background:none; color:#9a9aa0; font-weight:500; }
.pv2-report-btn{
margin-left:auto;
font-family:inherit;
font-size:12.5px;
font-weight:800;
color:#0a84ff;
background:#fff;
border:1px solid rgba(10,132,255,.32);
border-radius:8px;
padding:7px 12px;
cursor:pointer;
box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.pv2-report-btn:hover{ background:rgba(10,132,255,.07); border-color:#0a84ff; }
body:not(.role-fabric) .pv2-report-btn{ display:none!important; }
.pv2-grp { background:#fff; border:1px solid #e9e9ee; border-radius:15px; margin-bottom:14px; overflow:hidden; }
.pv2-h { display:flex; align-items:center; gap:9px; padding:13px 18px; cursor:pointer; user-select:none; }
.pv2-h .chev { font-size:11px; color:#9a9aa0; transition:transform .15s; }
.pv2-grp.collapsed .pv2-h .chev { transform:rotate(-90deg); }
.pv2-h .ic { font-size:16px; }
.pv2-h .t { font-weight:800; font-size:15px; }
.pv2-h .cnt { font-size:11.5px; font-weight:800; padding:1px 9px; border-radius:999px; color:#fff; }
.pv2-h .why { margin-left:auto; font-size:11px; color:#6e6e73; }
.pv2-grp.bulk .pv2-h { background:#fdeef0; border-bottom:1px solid #f6d3d8; } .pv2-grp.bulk .t { color:#d70015; } .pv2-grp.bulk .cnt { background:#d70015; }
.pv2-grp.samp .pv2-h { background:#eaf6ec; border-bottom:1px solid #cfe9d4; } .pv2-grp.samp .t { color:#1a7f37; } .pv2-grp.samp .cnt { background:#1a7f37; }
.pv2-grp.doneish { opacity:.82; } .pv2-grp.doneish .pv2-h { background:#f3f4f6; } .pv2-grp.doneish .t { color:#6e6e73; } .pv2-grp.doneish .cnt { background:#9a9aa0; }
.pv2-sm.doneish { background:#eef0f2; color:#6e6e73; }
.pv2-body { padding:14px 16px; }
.pv2-grp.collapsed .pv2-body { display:none; }
.pv2-div { display:flex; align-items:center; gap:7px; margin:10px 2px 7px; font-size:11.5px; font-weight:700; }
.pv2-div .d { width:7px; height:7px; border-radius:50%; }
.pv2-div .ct { font-family:'SF Mono',Menlo,monospace; font-size:10.5px; }
.pv2-div .ln { flex:1; height:1px; background:#f0f0f3; }
.pv2-div.po { color:#b25400; } .pv2-div.po .d { background:#b25400; }
.pv2-div.npo { color:#9a9aa0; } .pv2-div.npo .d { background:#9a9aa0; }
/* purchase-samp-bytype-v1 + 醒目版 (2026-06-02 用户·小标题太小): 样板面料类型小标题改成绿色条状,更醒目 */
.pv2-div.samp-type { color:#1a7f37; font-size:14px; font-weight:800; background:#eaf6ec; border:1px solid #cfe9d4; border-radius:9px; padding:8px 13px; margin:16px 0 11px; }
.pv2-div.samp-type .d { width:10px; height:10px; background:#1a7f37; }
.pv2-div.samp-type .ct { background:#1a7f37; color:#fff; border-radius:999px; padding:1px 9px; font-size:12px; font-weight:800; font-family:inherit; }
.pv2-div.samp-type .ln { display:none; }
.pv2-empty { text-align:center; color:#9a9aa0; padding:40px 0; font-size:14px; }
/* 已下 PO 组 — 信息多（EF + 运输 + 6 个徽章）— 360px 起 */
.today-cards-po {
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
/* 开发中组 — 信息少（3-4 个徽章）— 280px 起，密度更高 */
/* auto-fill + 1fr 上限会让列拉伸；用固定上限保证能真正塞更多列 */
.today-cards-dev {
grid-template-columns: repeat(auto-fill, minmax(280px, 320px));
justify-content: start;
}
.today-card {
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
border-radius: 4px;
padding: 12px 14px;
cursor: pointer;
display: flex; gap: 12px;
transition: transform 0.1s, box-shadow 0.1s;
}
.today-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
border-color: var(--ink);
}
/* 紧迫度用左侧 background gradient 浸入,代替 border-left side-stripe(impeccable absolute ban) */
.today-card.danger {
background: linear-gradient(to right, var(--danger-bg) 0%, var(--danger-bg) 4px, var(--bg-elevated) 6px);
}
.today-card.warn {
background: linear-gradient(to right, var(--warn-bg) 0%, var(--warn-bg) 4px, var(--bg-elevated) 6px);
}
.today-card .thumb-mini {
width: 56px; height: 72px;
background: var(--bg-sunken); border: 1px solid var(--line);
border-radius: 6px; object-fit: cover; flex-shrink: 0;
}
.today-card .thumb-mini-placeholder {
width: 56px; height: 72px;
background: var(--bg-sunken); border: 1px dashed var(--line-strong);
border-radius: 6px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
letter-spacing: 0.06em;
}
.today-card-body {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 5px;
}
.today-card-head {
display: flex; align-items: center; gap: 6px;
flex-wrap: wrap;
}
.today-card-sku {
font-family: var(--font-mono); font-size: 13px;
font-weight: 700; color: var(--ink);
letter-spacing: 0.02em;
white-space: nowrap;
}
.today-card-name {
font-size: 12.5px; color: var(--ink-soft);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: 500;
}
/* 今日卡片标签紧凑化 */
.today-card .client-badge,
.today-card .order-type-pill,
.today-card .sample-type-badge {
font-size: 11px !important;
padding: 2px 6px !important;
white-space: nowrap;
}
.today-card-action {
display: flex; flex-direction: column; gap: 2px;
margin-top: 2px;
}
.today-card-action-main {
font-size: 14px; font-weight: 600;
color: var(--ink);
line-height: 1.3;
}
.today-card-action-main.danger { color: var(--danger); }
.today-card-action-main.warn { color: var(--warn); }
.today-card-action-detail {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute); letter-spacing: 0.02em;
}
/* === 新版三行式卡片（v2）=== */
/* 三行结构：徽章栏 / 款号+PO栏 / 状态+EF栏 */
/* 行栏位严格固定，徽章不会跑到状态行 */
.today-card-v2 {
align-items: center;
}
.today-card-v2 .today-card-body {
display: grid;
gap: 5px;
min-width: 0;
}
.today-card-v2 .today-card-row1,
.today-card-v2 .today-card-row2,
.today-card-v2 .today-card-row3 {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.today-card-v2 .today-card-row1 {
min-height: 18px;
flex-wrap: wrap;
row-gap: 4px;
}
.today-card-v2 .today-card-row2 .today-card-sku {
font-family: var(--font-mono); font-size: 13px;
font-weight: 700; color: var(--ink);
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.today-card-v2 .today-card-po {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-soft);
font-weight: 500;
white-space: nowrap;
letter-spacing: 0.01em;
}
.today-card-v2 .today-card-po::before {
content: "·";
margin-right: 6px;
color: var(--line-strong);
font-weight: 400;
}
.today-card-v2 .today-card-row3 {
flex-wrap: nowrap;
}
.today-card-v2 .today-card-row3 .today-card-action-main {
font-size: 13px;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
min-width: 0;
}
.today-card-v2 .today-card-row3 .today-card-ef {
margin-top: 0;
flex-shrink: 0;
}
/* === v2 卡片徽章统一样式（截图里"官方"风格）=== */
/* 通用基础：所有 v2 卡片里的徽章都用同一种排版 */
.today-card-v2 .client-badge,
.today-card-v2 .sample-type-badge,
.today-card-v2 .dev-size-badge,
.today-card-v2 .category-badge,
.today-card-v2 .grading-badge,
/* po-lifecycle-v1: 通用 ship-method-badge (从 today-card-v2 解 scope) */
.ship-method-badge {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
line-height: 1.4;
}
.ship-method-badge.ship-air { background: #E6F1FB; color: #0C447C; }
.ship-method-badge.ship-sea { background: #E1F5EE; color: #0F6E56; }
.factory-badge.factory-outsourced { background: #f0e4d6; color: #7a4e10; }
.today-card-v2 .ship-method-badge,
.today-card-v2 .group-badge,
.today-card-v2 .today-card-row1 .today-card-ef {
font-family: var(--font-sans);
font-size: 10.5px;
font-weight: 600;
padding: 3px 8px;
border-radius: 6px;
border: none !important;
letter-spacing: 0.01em;
white-space: nowrap;
flex-shrink: 0;
line-height: 1.4;
margin: 0;
display: inline-flex;
align-items: center;
}
/* 客户徽章 */
.today-card-v2 .client-badge.client-boohoo { background: #1a1a1a; color: #fff; }
.today-card-v2 .client-badge.client-plt { background: #FFC9D9; color: #8B1E3F; }
/* 版型徽章 — 重写颜色为更纯净的浅底深字 */
.today-card-v2 .sample-type-badge.sample-type-new { background: #EAF3DE; color: #27500A; }
.today-card-v2 .sample-type-badge.sample-type-remake { background: #FAECE7; color: #712B13; }
.today-card-v2 .sample-type-badge.sample-type-photo { background: #E6F1FB; color: #0C447C; }
.today-card-v2 .sample-type-badge.sample-type-head { background: #FBF0DC; color: #7A4E00; }
/* 客户组别徽章（PLUS/WOVEN/DRESS/PETITE-TALL/MATERNITY）也用 v2 统一样式 */
.today-card-v2 .group-badge.group-plus { background: #FBEAF0; color: #72243E; }
.today-card-v2 .group-badge.group-woven { background: #FAECE7; color: #712B13; }
.today-card-v2 .group-badge.group-dress { background: #E6F1FB; color: #0C447C; }
.today-card-v2 .group-badge.group-co-ords { background: #FFF1D6; color: #7A4A00; }
.today-card-v2 .group-badge.group-petite-tall { background: #EAF3DE; color: #27500A; }
.today-card-v2 .group-badge.group-maternity { background: #F0EAFB; color: #4D2A7A; }
/* 开版码数 — 中性浅灰,跟缺面料的琥珀色错开 */
.today-card-v2 .dev-size-badge { background: #F4F2EC; color: #4A4A48; font-family: var(--font-mono); }
/* 款式类目 — 米色暖系,跟整体风格协调 */
.today-card-v2 .category-badge { background: #F7EFD9; color: #6B5419; }
/* 放码紫色 */
.today-card-v2 .grading-badge { background: #EEEDFE; color: #3C3489; }
/* po-pending-priority-v1 (2026-05-27 用户): PO 待补徽章 — 浅黄底深棕字,跟抽屉 chip 一致 */
.today-card-v2 .po-pending-chip {
background: #FFFBEB; color: #92400E; border: 1px solid #FCD34D;
font-size: 10.5px; padding: 1px 7px; border-radius: 8px;
font-weight: 600; letter-spacing: 0.2px;
display: inline-flex; align-items: center; gap: 3px;
}
/* 运输方式 */
.today-card-v2 .ship-method-badge.ship-air { background: #E6F1FB; color: #0C447C; }
.today-card-v2 .ship-method-badge.ship-sea { background: #E1F5EE; color: #0F6E56; }
/* EF 倒计时（在 Row 1 时按徽章样式呈现）*/
.today-card-v2 .today-card-row1 .today-card-ef.ef-warn { background: #FAEEDA; color: #854F0B; }
.today-card-v2 .today-card-row1 .today-card-ef.ef-danger { background: #FCEBEB; color: #A32D2D; }
.today-card-v2 .today-card-row1 .today-card-ef.ef-overdue { background: #FCEBEB; color: #501313; }
.today-card-v2 .today-card-row1 .today-card-ef.ef-ok { background: #F1EFE8; color: #5F5E5A; }
/* 卡片整体更圆润、左色条厚一点 */
.today-card-v2 {
border-radius: 12px;
align-items: center;
}
.today-card-v2.danger { border-left: 3px solid #E24B4A; padding-left: 9px; }
.today-card-v2.warn { border-left: 3px solid #EF9F27; padding-left: 9px; }
.today-card-v2.is-grading { border-left: 3px solid #534AB7 !important; padding-left: 9px; }
/* 一键按钮 — 蓝色 pill */
.today-card-v2 .today-card-quick-actions .today-quick-btn {
background: #007AFF;
color: #fff;
border: none;
border-radius: 8px;
padding: 8px 14px;
font-size: 12px;
font-weight: 500;
font-family: var(--font-sans);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
box-shadow: none;
letter-spacing: 0.01em;
}
.today-card-v2 .today-card-quick-actions .today-quick-btn:hover {
background: #0066D6;
}
/* 等放码状态的按钮用紫色 */
.today-card-v2.is-grading .today-card-quick-actions .today-quick-btn {
background: #534AB7;
}
.today-card-v2.is-grading .today-card-quick-actions .today-quick-btn:hover {
background: #423B98;
}
/* 已催标签 + 已催过的卡片视觉处理 */
.today-card-chased-tag {
font-family: var(--font-sans);
font-size: 10.5px;
font-weight: 600;
color: var(--ink-soft);
background: rgba(120, 120, 128, 0.10);
padding: 2px 8px;
border-radius: 4px;
letter-spacing: 0.01em;
white-space: nowrap;
margin-left: auto;
}
.today-card.chased-today {
/* 今天已催过的卡片：左边色条变中性灰，整张轻微降亮，但天数仍正常显示 */
border-left-color: rgba(120, 120, 128, 0.5) !important;
background: rgba(120, 120, 128, 0.025);
}
.today-card.chased-today .today-card-action-main {
/* 已催过的款，主信息颜色稍微暗一点 */
opacity: 0.78;
}
/* EF 倒计时（已下 PO 的款显示）*/
.today-card-ef {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.01em;
padding: 1px 7px;
border-radius: 4px;
width: fit-content;
margin-top: 1px;
}
.today-card-ef.ef-overdue {
background: var(--danger-bg);
color: var(--danger);
font-weight: 700;
animation: efPulse 1.4s ease-in-out infinite;
}
.today-card-ef.ef-danger {
background: var(--danger-bg);
color: var(--danger);
font-weight: 600;
}
.today-card-ef.ef-warn {
background: var(--warn-bg);
color: var(--warn);
font-weight: 600;
}
.today-card-ef.ef-ok {
background: var(--bg-sunken);
color: var(--ink-mute);
}
@keyframes efPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
/* 单卡快捷动作按钮：iOS 风蓝色 pill */
.today-card-quick-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
margin-left: 4px;
}
.today-quick-btn {
background: var(--apple-blue);
color: white;
border: none;
padding: 8px 14px;
border-radius: 8px;
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
box-shadow: 0 2px 5px rgba(0, 122, 255, 0.18);
letter-spacing: 0.01em;
}
.today-quick-btn:hover {
background: var(--apple-blue-hover);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 122, 255, 0.25);
}
.today-quick-btn:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(0, 122, 255, 0.15);
}
.today-empty {
padding: 80px 20px; text-align: center;
background: var(--bg-elevated);
border: 1px dashed var(--line-strong);
border-radius: 4px;
}
.today-empty .icon {
font-size: 48px; margin-bottom: 12px;
display: block; color: var(--ok);
}
.today-empty h3 {
font-family: var(--font-serif); font-style: italic;
font-size: 28px; font-weight: 400;
color: var(--ink); margin-bottom: 8px;
}
.today-empty p { color: var(--ink-soft); }
/* 总开发时长 */
.dev-since-tag {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.04em;
background: var(--bg-sunken);
color: var(--ink-soft);
border-radius: 6px;
}
.dev-since-tag .lbl {
text-transform: uppercase;
color: var(--ink-mute);
}
/* PO 项 hover/双击 提示 */
.po-item {
position: relative;
user-select: none;
}
.po-item::after {
content: '双击编辑';
position: absolute;
right: 12px; top: 50%; transform: translateY(-50%);
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute); letter-spacing: 0.04em;
opacity: 0; transition: opacity 0.15s;
pointer-events: none;
}
.po-item:hover::after { opacity: 1; }
/* 客户款号显示 */
.client-style-no {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.02em;
}
/* 大货已到仓标签 */
.cal-detail-done-tag {
display: inline-flex; align-items: center;
padding: 2px 8px;
font-family: var(--font-mono); font-size: 11px;
font-weight: 600; letter-spacing: 0.04em;
background: var(--ok-bg); color: var(--ok-soft, var(--ok));
border-radius: 6px;
margin-left: auto;
}
.po-item-client-no {
display: block;
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute);
margin-top: 2px;
}
.snooze-hint {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: #FBF6E3;
border: 1px solid #E8DDA8;
border-radius: 4px;
font-size: 12px; color: #6B5418;
margin-bottom: 16px;
}
.snooze-hint .snooze-icon {
font-size: 18px;
}
.snooze-hint b {
color: #4A3A0F; font-weight: 600;
}
.snooze-hint button {
margin-left: auto;
background: var(--bg-elevated);
border: 1px solid #C4B97A;
color: #6B5418;
padding: 5px 12px;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.06em;
border-radius: 6px; cursor: pointer;
white-space: nowrap;
}
.snooze-hint button:hover {
background: #6B5418; color: white; border-color: #6B5418;
}
/* 历史 tab 数字标签 - 稍灰 */
.top-tab .count { background: var(--bg-sunken); color: var(--ink-soft); }
/* 简化筛选区域 */
.more-filters-btn {
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
padding: 7px 14px;
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
color: var(--ink-soft); cursor: pointer; border-radius: 6px;
text-transform: uppercase;
}
.more-filters-btn:hover { color: var(--ink); border-color: var(--ink); }
.more-filters-btn.open { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.more-filters-panel {
max-width: 1800px; margin: 0 auto; padding: 14px 32px;
background: var(--bg-sunken); border-bottom: 1px solid var(--line);
display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.filter-label {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-mute); padding: 0 8px;
}
/* === 列表行精简版 === */
.style-row.simplified {
grid-template-columns: 60px 100px 70px 1fr 200px 36px;
gap: 14px;
padding: 12px 16px;
}
.list-header.simplified {
grid-template-columns: 60px 100px 70px 1fr 200px 36px;
gap: 14px;
padding: 11px 16px;
}
.style-row .thumb, .style-row .thumb-placeholder {
width: 48px; height: 60px;
}
.style-row.recently-updated {
background: linear-gradient(to right, #FDFAEA 0, #FDFAEA 4px, var(--bg-elevated) 4px, var(--bg-elevated) 100%);
border-left: 3px solid #C4B97A;
padding-left: 13px;
}
.style-row.urgent-danger.recently-updated { border-left-color: var(--danger); }
.style-row.urgent-warn.recently-updated { border-left-color: var(--warn); }
.style-row.keyboard-selected {
background: var(--bg-sunken) !important;
outline: 2px solid var(--ink);
outline-offset: -2px;
}
.node-line {
display: flex; align-items: baseline; gap: 8px;
font-size: 13px;
}
.node-line .stage-tag {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.04em;
padding: 2px 6px;
border-radius: 6px;
font-weight: 500;
}
.node-line .stage-tag.dev { background: var(--stage-dev-bg); color: var(--stage-dev); }
.node-line .stage-tag.revise { background: var(--stage-revise-bg); color: var(--stage-revise); }
.node-line .stage-tag.prod { background: var(--stage-prod-bg); color: var(--stage-prod); }
.node-line .stage-tag.await-fit { background: var(--warn-bg); color: var(--warn); }
.node-line .stage-tag.done { background: var(--stage-done-bg); color: var(--stage-done); }
.node-line .stage-tag.archived { background: var(--stage-archived-bg); color: var(--stage-archived); }
.node-line .node-name {
font-weight: 600; color: var(--ink);
}
.node-line .node-name.danger { color: var(--danger); }
.node-line .node-name.warn { color: var(--warn); }
.node-line .node-name.done { color: var(--ok); }
.node-line .node-since {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute); margin-left: auto;
}
.node-line .node-since.danger { color: var(--danger); font-weight: 600; }
.node-line .node-since.warn { color: var(--warn); font-weight: 600; }
/* #3: 详情抽屉缩略图缩小 + meta 区紧凑 */
.detail-image-mini {
width: 80px; height: 100px;
border: 1px solid var(--line);
border-radius: 8px; object-fit: cover;
background: var(--bg-sunken);
flex-shrink: 0;
}
.detail-image-mini-placeholder {
width: 80px; height: 100px;
background: var(--bg-sunken); border: 1px dashed var(--line-strong);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
color: var(--ink-mute);
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
flex-shrink: 0;
}
.detail-top-section {
display: flex; gap: 14px; margin-bottom: 18px;
align-items: flex-start;
}
.detail-top-section .detail-meta-strip {
flex: 1; display: flex; flex-direction: column; gap: 8px;
min-width: 0;
}
.image-change-mini-btn {
display: block; margin-top: 6px;
width: 80px; /* 跟新缩小图同宽 */
background: transparent; border: 1px solid var(--line-strong);
padding: 4px 0;
font-family: var(--font-sans); font-size: 11px; letter-spacing: 0;
font-weight: 500;
cursor: pointer; border-radius: 6px;
color: var(--ink-soft); text-align: center;
width: 100px;
}
.image-change-mini-btn:hover { border-color: var(--ink); color: var(--ink); }
/* 折叠详情 */
.detail-collapse {
margin-top: 16px;
border-top: 1px dashed var(--line);
padding-top: 16px;
}
.detail-collapse-toggle {
background: transparent; border: none;
padding: 8px 0;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.06em;
color: var(--ink-mute);
cursor: pointer;
display: flex; align-items: center; gap: 8px;
width: 100%;
}
.detail-collapse-toggle:hover { color: var(--ink); }
.detail-collapse-toggle .chevron {
transition: transform 0.15s;
font-size: 11px;
}
.detail-collapse.open .chevron { transform: rotate(90deg); }
.detail-collapse-content {
display: none;
padding-top: 12px;
}
.detail-collapse.open .detail-collapse-content { display: block; }
/* 今日跟进里 等 fit 单独分组 */
.today-section.section-fit h2 .count-badge.fit {
background: #F5E9D1; color: #855316;
}
/* 键盘提示 */
.kbd-hint {
display: inline-block;
padding: 1px 5px;
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
border-radius: 6px;
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute);
margin-left: 4px;
}
/* 历史档案页面 */
.archive-page {
display: flex; flex-direction: column; gap: 24px;
}
.archive-section h2 {
font-family: var(--font-serif); font-style: italic;
font-size: 22px; font-weight: 400;
margin-bottom: 12px;
display: flex; align-items: baseline; gap: 12px;
}
.archive-section h2 .count-badge {
font-family: var(--font-mono); font-size: 12px;
letter-spacing: 0.04em; font-weight: 500;
font-style: normal;
padding: 2px 10px; border-radius: 12px;
background: var(--bg-sunken); color: var(--ink-soft);
}
/* ============================================================
版师档案库(版师用)— 简洁档案列表
============================================================ */
.patternlog-page {
display: flex; flex-direction: column; gap: 16px;
padding-top: 8px;
}
.patternlog-header {
display: flex; align-items: baseline; gap: 12px;
margin-bottom: 4px;
}
.patternlog-title {
font-family: var(--font-serif); font-style: italic;
font-size: 26px; font-weight: 400;
letter-spacing: 0.2px;
}
.patternlog-subtitle {
font-size: 12px; color: var(--ink-mute);
}
/* 工具栏 — sticky 顶部 */
.patternlog-toolbar {
position: sticky; top: 0;
background: var(--bg);
padding: 10px 0 12px;
border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 16px;
flex-wrap: wrap;
z-index: 10;
}
@media (max-width: 600px) {
.patternlog-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
.patternlog-searchbar { width: 100%; }
}
.patternlog-searchbar {
display: flex; align-items: center; gap: 8px;
background: var(--bg-sunken);
border: 1px solid transparent;
border-radius: 8px;
padding: 7px 12px;
height: 32px;
width: 320px;
max-width: 100%;
transition: background 0.15s, border-color 0.15s;
}
.patternlog-searchbar:hover {
background: var(--bg-elevated);
border-color: var(--line);
}
.patternlog-searchbar:focus-within {
background: var(--bg-elevated);
border-color: var(--line-strong);
}
.patternlog-searchbar svg {
color: var(--ink-mute);
flex-shrink: 0;
width: 13px;
height: 13px;
}
.patternlog-searchbar input {
flex: 1;
border: none; outline: none; background: transparent;
font-size: 13px; color: var(--ink);
font-family: var(--font-sans);
min-width: 0;
}
.patternlog-searchbar input:focus,
.patternlog-searchbar input:focus-visible {
box-shadow: none !important;
outline: none !important;
border-color: transparent !important;
}
.patternlog-searchbar input::placeholder { color: var(--ink-mute); }
.patternlog-searchbar .clear-btn {
background: var(--line); color: var(--ink-soft);
border: none; width: 16px; height: 16px; border-radius: 50%;
font-size: 12px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.patternlog-searchbar .clear-btn:hover { background: var(--line-strong); color: var(--ink); }
.patternlog-filters {
display: flex; gap: 6px; align-items: center;
}
.patternlog-filter-btn {
background: transparent;
border: 1px solid transparent;
color: var(--ink-soft);
font-size: 12px; font-weight: 500;
font-family: var(--font-sans);
padding: 5px 12px;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
letter-spacing: 0.1px;
}
.patternlog-filter-btn:hover {
background: var(--bg-sunken);
color: var(--ink);
}
.patternlog-filter-btn.active {
background: var(--bg-elevated);
color: var(--ink);
border-color: var(--line);
box-shadow: var(--shadow-xs);
}
.patternlog-filter-btn .count {
margin-left: 4px;
opacity: 0.55;
font-size: 11px;
font-variant-numeric: tabular-nums;
}
/* 时间组分组 */
.patternlog-group { margin-top: 8px; }
.patternlog-group-header {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600;
color: var(--ink-soft);
margin: 16px 0 10px 0;
letter-spacing: 0.3px;
}
.patternlog-group-header .group-count {
font-size: 11px; font-weight: 500;
color: var(--ink-mute);
background: var(--bg-sunken);
padding: 1px 8px;
border-radius: 10px;
}
/* 卡片 */
.patternlog-cards {
display: flex; flex-direction: column; gap: 8px;
}
.patternlog-card {
display: flex; align-items: center; gap: 14px;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px 16px;
cursor: pointer;
transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.patternlog-card:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow-sm);
}
.patternlog-card:active { transform: scale(0.998); }
.patternlog-card .thumb {
width: 64px; height: 64px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
background: var(--bg-sunken);
display: flex; align-items: center; justify-content: center;
}
.patternlog-card .thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.patternlog-card .thumb.no-image {
color: var(--ink-mute);
font-size: 11px;
}
.patternlog-card .body {
flex: 1;
min-width: 0;
display: flex; flex-direction: column; gap: 4px;
}
.patternlog-card .row-badges {
display: flex; align-items: center; gap: 6px;
flex-wrap: wrap;
}
.patternlog-card .sku-line {
display: flex; align-items: baseline; gap: 8px;
font-size: 14px; font-weight: 600;
color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.patternlog-card .sku-line .name {
font-weight: 400; color: var(--ink-soft);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.patternlog-card .meta-line {
font-size: 12px; color: var(--ink-mute);
display: flex; align-items: center; gap: 8px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.patternlog-card .meta-line .done-date {
color: var(--ok);
font-weight: 500;
}
.patternlog-card .meta-line .sep { color: var(--line-strong); }
.patternlog-card .meta-line .current {
color: var(--ink-soft);
}
.patternlog-card .meta-line .current.done {
color: var(--ok);
}
.patternlog-card .meta-line .current.archived {
color: var(--ink-mute);
}
/* 空状态 */
.patternlog-empty {
text-align: center;
padding: 60px 20px;
color: var(--ink-mute);
}
.patternlog-empty .ico { font-size: 40px; margin-bottom: 12px; opacity: 0.4; }
.patternlog-empty h3 {
font-family: var(--font-serif); font-style: italic;
font-size: 22px; font-weight: 400;
color: var(--ink-soft); margin-bottom: 8px;
}
.patternlog-empty p { font-size: 13px; }
@media (max-width: 1100px) {
.style-row.simplified, .list-header.simplified {
grid-template-columns: 50px 90px 60px 1fr 160px 36px;
gap: 10px;
}
}
/* ============================================================
历史档案 v2 — 统计概览 + sub-nav + 紧凑行
============================================================ */
.archive-page-v2 {
display: flex; flex-direction: column; gap: 18px;
}
.archive-summary-bar {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 12px;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 14px;
padding: 18px 22px;
box-shadow: var(--shadow-sm);
}
.archive-summary-item {
display: flex; flex-direction: column; gap: 3px;
padding: 0 4px;
border-right: 1px solid var(--line);
}
.archive-summary-item:last-child { border-right: none; }
.archive-summary-item .lbl {
font-size: 11px; color: var(--ink-mute);
letter-spacing: 0.02em;
}
.archive-summary-item .val {
font-size: 22px; font-weight: 600;
color: var(--ink); letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.archive-summary-item .val-sub {
font-size: 11px; color: var(--ink-soft);
}
.archive-sub-nav {
display: flex; gap: 4px;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 10px; padding: 4px;
width: max-content;
}
.archive-sub-nav-btn {
padding: 7px 16px; border-radius: 7px;
font-size: 13px; font-weight: 500; color: var(--ink-soft);
border: none; background: transparent; cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
display: flex; align-items: center; gap: 6px;
font-family: inherit;
}
.archive-sub-nav-btn:hover { background: var(--bg-hover); }
.archive-sub-nav-btn.active {
background: var(--ink); color: #fff;
}
.archive-sub-nav-btn .count {
font-size: 11px; padding: 1px 6px; border-radius: 8px;
background: var(--bg-sunken); color: var(--ink-mute);
font-variant-numeric: tabular-nums; font-weight: 500;
}
.archive-sub-nav-btn.active .count { background: rgba(255,255,255,0.18); color: #fff; }
.archive-time-group { margin-bottom: 4px; }
.archive-time-group-header {
display: flex; align-items: baseline; gap: 10px;
padding: 14px 4px 8px;
}
.archive-time-group-header .label {
font-family: var(--font-sans);
font-size: 16px; font-weight: 600;
color: var(--ink); letter-spacing: -0.01em;
}
.archive-time-group-header .count {
font-size: 12px; color: var(--ink-mute);
font-variant-numeric: tabular-nums;
}
.archive-time-group-header .avg {
margin-left: auto;
font-size: 11px; color: var(--ink-mute);
font-variant-numeric: tabular-nums;
}
.archive-list-v2 {
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
}
.archive-list-header-v2 {
display: grid;
grid-template-columns: 44px minmax(140px, 1.4fr) 100px minmax(140px, 1fr) 140px 140px 80px;
gap: 14px; padding: 10px 16px;
background: var(--bg-sunken);
font-size: 11px; color: var(--ink-mute); font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
}
.archive-row-v2 {
display: grid;
grid-template-columns: 44px minmax(140px, 1.4fr) 100px minmax(140px, 1fr) 140px 140px 80px;
gap: 14px; padding: 12px 16px;
align-items: center;
border-bottom: 1px solid var(--line);
transition: background 0.12s ease;
cursor: pointer;
background: var(--bg-elevated);
}
.archive-row-v2:last-child { border-bottom: none; }
.archive-row-v2:hover { background: var(--bg-hover); }
.archive-row-v2.batch-selected { background: var(--apple-blue-bg); }
.archive-row-v2 > .thumb,
.archive-row-v2 > .thumb-placeholder {
width: 40px !important; height: 50px !important;
border-radius: 6px !important;
}
.archive-row-v2 .cell-style {
display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.archive-row-v2 .archive-sku {
font-weight: 600; font-size: 14px; color: var(--ink);
letter-spacing: -0.005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.archive-row-v2 .archive-name {
font-size: 12px; color: var(--ink-mute);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.archive-row-v2 .cell-client {
display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
}
.archive-row-v2 .cell-po {
display: flex; flex-direction: column; gap: 2px;
font-variant-numeric: tabular-nums;
min-width: 0;
}
.archive-row-v2 .po-num-v2 {
font-size: 13px; font-weight: 600; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.archive-row-v2 .po-qty-v2 {
font-size: 11px; color: var(--ink-mute);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.archive-row-v2 .cell-factory {
font-size: 12px; color: var(--ink-soft);
display: flex; flex-direction: column; gap: 3px;
align-items: flex-start;
}
.archive-row-v2 .cell-factory .factory-line { font-weight: 500; }
.archive-row-v2 .cell-factory .order-type-line { font-size: 11px; color: var(--ink-mute); }
.archive-row-v2 .cell-time {
display: flex; flex-direction: column; gap: 2px;
font-variant-numeric: tabular-nums;
}
.archive-row-v2 .end-date-v2 {
font-size: 12px; color: var(--ink-soft); font-weight: 500;
}
.archive-row-v2 .duration-v2 {
font-size: 11px; color: var(--ink-mute);
font-weight: 500;
}
.archive-row-v2 .duration-v2.fast { color: var(--ok); }
.archive-row-v2 .duration-v2.long { color: var(--warn); }
.archive-row-v2 .cell-actions-v2 {
display: flex; gap: 6px; justify-content: flex-end;
}
.btn-icon-v2 {
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--line); border-radius: 7px;
background: var(--bg-elevated); color: var(--ink-soft); cursor: pointer;
font-size: 13px;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.btn-icon-v2:hover { background: var(--bg-sunken); color: var(--ink); border-color: var(--line-strong); }
.btn-icon-v2.danger:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
/* 归档原因 chip */
.reason-chip-v2 {
display: inline-flex; padding: 2px 8px; border-radius: 4px;
font-size: 10.5px; font-weight: 600;
letter-spacing: 0.02em;
}
.reason-chip-v2.reason-customer-cancel { background: var(--bg-sunken); color: var(--ink-soft); }
.reason-chip-v2.reason-failed { background: var(--danger-bg); color: var(--danger); }
.reason-chip-v2.reason-price { background: var(--warn-bg); color: var(--warn); }
.reason-chip-v2.reason-other { background: #EDECFE; color: #5856D6; }
.archive-row-v2 .archive-note-mini {
font-size: 11px; color: var(--ink-mute);
font-style: italic;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
/* 批量复选框(仅未采用) */
.archive-row-v2 .row-batch-checkbox {
position: absolute;
left: 6px; top: 50%;
transform: translateY(-50%);
z-index: 2;
opacity: 0;
transition: opacity 0.18s;
}
.archive-row-v2:hover .row-batch-checkbox,
.archive-row-v2 .row-batch-checkbox:checked,
body.batch-mode .archive-row-v2 .row-batch-checkbox,
body.batch-mode-locked .archive-row-v2 .row-batch-checkbox {
opacity: 1;
}
.archive-row-v2.archive-row-done .row-batch-checkbox { display: none; }
.archive-row-v2.batch-selected { background: var(--apple-blue-bg); }
/* 历史 tab 空态 */
.archive-empty-v2 {
text-align: center; padding: 48px 24px;
color: var(--ink-mute); font-size: 13px;
background: var(--bg-elevated);
border: 1px dashed var(--line-strong);
border-radius: 12px;
}
.archive-empty-v2 h3 { font-size: 16px; color: var(--ink-soft); font-weight: 500; margin-bottom: 4px; }
/* 窄屏 fallback */
@media (max-width: 1100px) {
.archive-summary-bar { grid-template-columns: repeat(2, 1fr); }
.archive-summary-item { border-right: none; }
.archive-list-header-v2,
.archive-row-v2 {
grid-template-columns: 40px 1fr 80px 120px 110px 110px 70px;
gap: 10px; padding: 10px 12px;
}
}
/* === 新的双行节点布局 === */
.node-block {
display: flex; flex-direction: column; gap: 4px;
min-width: 0;
}
.node-block-row1 {
display: flex; align-items: center; gap: 8px;
flex-wrap: nowrap;
min-width: 0;
}
.node-block-row1 .stage-tag {
flex-shrink: 0;
}
.node-block-row1 .node-name {
font-weight: 600;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.node-block-row2 {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute);
}
.node-block-row2 .node-since {
font-family: var(--font-mono); font-size: 11px;
}
.node-block-row2 .node-since.danger { color: var(--danger); font-weight: 600; }
.node-block-row2 .node-since.warn { color: var(--warn); font-weight: 600; }
.node-block-row2 .node-since.done { color: var(--ok); }
/* 列表列宽调整：当前进度列加宽到 240px */
.style-row.simplified {
grid-template-columns: 60px 100px 70px minmax(140px, 1fr) 240px 36px;
column-gap: 12px;
}
.style-row.simplified:has(> .client-badge.client-badge-mid) {
grid-template-columns: 60px 100px 116px minmax(140px, 1fr) 240px 36px;
}
.style-row.simplified:has(> .client-badge.client-badge-long) {
grid-template-columns: 60px 100px 156px minmax(140px, 1fr) 240px 36px;
}
.list-header.simplified {
grid-template-columns: 60px 100px 70px minmax(140px, 1fr) 240px 36px;
column-gap: 12px;
}
.style-row.simplified .sku,
.style-row.simplified > div:not(.node-block) {
min-width: 0;
}
.style-row.simplified > .thumb,
.style-row.simplified > .thumb-placeholder {
grid-column: 1;
}
.style-row.simplified > .sku {
grid-column: 2;
}
.style-row.simplified > .client-badge {
grid-column: 3;
justify-self: start;
max-width: 100%;
}
.style-row.simplified > .client-badge.client-badge-mid {
width: max-content;
max-width: 136px;
}
.style-row.simplified > .client-badge.client-badge-long {
width: max-content;
max-width: 176px;
}
.style-row.simplified > div:not(.sku):not(.client-badge):not(.thumb-placeholder):not(.node-block):not(.arrow) {
grid-column: 4;
}
.style-row.simplified > .node-block {
grid-column: 5;
}
.style-row.simplified > .arrow {
grid-column: 6;
}
@media (max-width: 1100px) {
.style-row.simplified, .list-header.simplified {
grid-template-columns: 50px minmax(96px, 1fr) minmax(96px, 112px) minmax(0, 1.5fr) 200px 36px;
gap: 10px;
}
.style-row.simplified:has(> .client-badge.client-badge-mid),
.style-row.simplified:has(> .client-badge.client-badge-long) {
grid-template-columns: 50px minmax(96px, 1fr) minmax(112px, 140px) minmax(0, 1.5fr) 200px 36px;
}
.style-row.simplified > .client-badge {
max-width: min(104px, 100%);
}
.style-row.simplified > .client-badge.client-badge-mid,
.style-row.simplified > .client-badge.client-badge-long {
max-width: min(140px, 100%);
}
}
/* === 大货跟进按日期分组样式 === */
.date-group {
margin-bottom: 24px;
}
.date-group-header {
padding: 12px 16px;
background: var(--bg-elevated);
border-radius: 4px 4px 0 0;
border: 1px solid var(--line-strong);
border-bottom: none;
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 16px;
letter-spacing: -0.005em;
color: var(--ink);
text-transform: none;
}
.date-group-header .date-main {
font-family: var(--font-serif); font-style: italic;
font-size: 22px; font-weight: 400;
color: var(--ink);
}
.date-group-header .count {
background: var(--bg-sunken); color: var(--ink);
padding: 3px 12px; border-radius: 12px;
font-family: var(--font-mono); font-size: 11px;
font-weight: 500; letter-spacing: 0.04em;
border: 1px solid var(--line-strong);
}
/* 不同日期紧迫度的颜色 */
.date-group.date-danger .date-group-header {
background: var(--danger-bg);
border-color: var(--danger-bg);
}
.date-group.date-danger .date-group-header .date-main {
color: var(--danger);
}
.date-group.date-danger .date-group-header .count {
background: var(--bg-elevated); color: var(--danger);
border-color: var(--danger-bg);
}
.date-group.date-warn .date-group-header {
background: var(--warn-bg);
border-color: var(--warn-bg);
}
.date-group.date-warn .date-group-header .date-main {
color: var(--warn);
}
.date-group.date-warn .date-group-header .count {
background: var(--bg-elevated); color: var(--warn);
border-color: var(--warn-bg);
}
.date-group.date-ok .date-group-header {
background: var(--ok-bg);
border-color: var(--ok-bg);
}
.date-group.date-ok .date-group-header .date-main {
color: var(--ok);
}
.date-group.date-ok .date-group-header .count {
background: var(--bg-elevated); color: var(--ok);
border-color: var(--ok-bg);
}
.date-group.date-overdue .date-group-header {
background: var(--danger-bg);
border: 1px solid var(--danger);
}
.date-group.date-overdue .date-group-header .date-main {
color: var(--danger);
}
.date-group.date-overdue .date-group-header .count {
background: var(--danger); color: #fff;
border-color: var(--danger);
}
.date-group.date-overdue .production-list {
border: 1px solid var(--danger);
border-top: none;
border-radius: 0 0 10px 10px;
overflow: hidden;
}
.date-group.date-done .date-group-header {
background: var(--bg-sunken);
border-color: var(--line-strong);
}
.date-group.date-done .date-group-header .date-main {
color: var(--ok); font-style: normal;
font-family: var(--font-sans); font-size: 16px; font-weight: 600;
}
.date-group .production-list {
border-radius: 0 0 4px 4px;
}
.date-group.no-date .date-group-header {
background: var(--bg-sunken);
border-color: var(--line-strong);
}
.date-group.no-date .date-group-header .date-main {
color: var(--ink-mute);
}
.ef-date-filter {
display: flex; align-items: center; gap: 8px;
padding: 5px 12px;
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
border-radius: 6px;
}
.ef-date-filter label {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-mute); font-weight: 500;
}
.ef-date-filter input[type="date"] {
border: none; outline: none; background: transparent;
font-family: var(--font-mono); font-size: 12px;
color: var(--ink); padding: 0;
min-width: 120px;
}
.ef-date-filter.active {
background: var(--ink); color: var(--bg);
border-color: var(--ink);
}
.ef-date-filter.active label,
.ef-date-filter.active input[type="date"] {
color: var(--bg);
}
.ef-date-filter.active input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
}
.ef-clear-btn {
background: transparent; border: none; cursor: pointer;
color: inherit; font-size: 16px; line-height: 1;
padding: 0 4px; opacity: 0.5;
display: none;
}
.ef-clear-btn:hover { opacity: 1; }
.ef-date-filter.active .ef-clear-btn { display: inline-block; }
/* === 增强版阶段标签（变大、变粗） === */
.node-block-row1 .stage-tag {
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 8px;
border: 1px solid transparent;
}
.node-block-row1 .stage-tag.dev {
background: var(--stage-dev-bg);
color: var(--stage-dev);
border-color: rgba(107, 91, 181, 0.2);
}
.node-block-row1 .stage-tag.revise {
background: var(--stage-revise-bg);
color: var(--stage-revise);
border-color: rgba(181, 112, 29, 0.2);
}
.node-block-row1 .stage-tag.prod {
background: var(--stage-prod-bg);
color: var(--stage-prod);
border-color: rgba(29, 90, 168, 0.2);
}
.node-block-row1 .stage-tag.await-fit {
background: var(--warn-bg);
color: var(--warn);
border-color: rgba(168, 109, 29, 0.2);
}
.node-block-row1 .stage-tag.done {
background: var(--stage-done-bg);
color: var(--stage-done);
border-color: rgba(43, 106, 63, 0.2);
}
.node-block-row1 .stage-tag.archived {
background: var(--stage-archived-bg);
color: var(--stage-archived);
}
/* 列表行：阶段背景着色（很淡） */
.style-row.simplified.stage-bg-dev { background: linear-gradient(to right, #FAF8FD, var(--bg-elevated) 30%); }
.style-row.simplified.stage-bg-revise { background: linear-gradient(to right, #FCF8F1, var(--bg-elevated) 30%); }
.style-row.simplified.stage-bg-prod { background: linear-gradient(to right, #F4F8FD, var(--bg-elevated) 30%); }
.style-row.simplified.stage-bg-await-fit { background: linear-gradient(to right, #FCF6E8, var(--bg-elevated) 30%); }
/* hover 时背景统一 */
.style-row.simplified:hover { background: var(--bg-hover) !important; }
/* 紧急情况优先（红/黄边）覆盖阶段背景 */
.style-row.urgent-danger.recently-updated { border-left-color: var(--danger); }
.style-row.urgent-warn.recently-updated { border-left-color: var(--warn); }
/* 看板卡片按阶段配色（标签 + 顶部色条） */
.board-card.stage-bg-dev { border-top: 3px solid var(--stage-dev); }
.board-card.stage-bg-revise { border-top: 3px solid var(--stage-revise); }
.board-card.stage-bg-prod { border-top: 3px solid var(--stage-prod); }
.board-card.stage-bg-await-fit { border-top: 3px solid var(--warn); }
/* 抽屉头部加一条阶段色条 */
.drawer-stage-bar {
height: 4px;
width: 100%;
}
.drawer-stage-bar.dev { background: var(--stage-dev); }
.drawer-stage-bar.revise { background: var(--stage-revise); }
.drawer-stage-bar.prod { background: var(--stage-prod); }
.drawer-stage-bar.await-fit { background: var(--warn); }
.drawer-stage-bar.done { background: var(--ok); }
.drawer-stage-bar.archived { background: var(--stage-archived); }
/* 大货跟进行也用类似配色 */
.production-row.with-node.stage-bg-dev { background: linear-gradient(to right, #FAF8FD, var(--bg-elevated) 30%); }
.production-row.with-node.stage-bg-revise { background: linear-gradient(to right, #FCF8F1, var(--bg-elevated) 30%); }
.production-row.with-node.stage-bg-prod { background: linear-gradient(to right, #F4F8FD, var(--bg-elevated) 30%); }
.production-row.with-node.stage-bg-await-fit { background: linear-gradient(to right, #FCF6E8, var(--bg-elevated) 30%); }
.production-row.with-node:hover { background: var(--bg-hover) !important; }
.image-viewer-backdrop {
position: fixed; inset: 0;
background: rgba(15, 15, 10, 0.92);
z-index: 300;
display: none;
align-items: center; justify-content: center;
padding: 40px;
cursor: zoom-out;
}
.image-viewer-backdrop.open {
display: flex;
animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.image-viewer-img {
max-width: 100%; max-height: 100%;
object-fit: contain;
cursor: default;
border-radius: 4px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.image-viewer-close {
position: fixed; top: 20px; right: 20px; z-index: 302;
width: 44px; height: 44px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: white;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s;
}
.image-viewer-close:hover { background: rgba(255, 255, 255, 0.25); }
.image-viewer-nav {
position: fixed; top: 50%; transform: translateY(-50%); z-index: 302;
width: 48px; height: 48px; opacity: 0.7;
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%; color: white; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.image-viewer-nav:hover { background: rgba(255,255,255,0.2); opacity: 1; }
.image-viewer-prev { left: 20px; }
.image-viewer-next { right: 20px; }
.image-viewer-nav.hidden { opacity: 0; pointer-events: none; }
.image-viewer-counter {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 302;
background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8);
padding: 6px 16px; border-radius: 20px;
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
}
.image-viewer-status {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
z-index: 301;
display: none;
max-width: min(360px, calc(100vw - 64px));
padding: 12px 18px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.18);
color: rgba(255,255,255,0.86);
font-size: 13px;
line-height: 1.4;
text-align: center;
cursor: default;
}
.image-viewer-backdrop.is-loading .image-viewer-status,
.image-viewer-backdrop.is-error .image-viewer-status {
display: block;
}
.image-viewer-backdrop.is-loading .image-viewer-img {
opacity: 0;
}
.image-viewer-backdrop.is-error .image-viewer-img {
display: none;
}
/* 详情里的小图加放大提示 */
.detail-image-mini {
cursor: zoom-in;
transition: transform 0.1s, box-shadow 0.1s;
}
.detail-image-mini:hover {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* 缩略图双击放大提示 */
.thumb-zoomable {
cursor: zoom-in;
transition: opacity 0.1s;
position: relative;
}
.thumb-zoomable:hover {
opacity: 0.85;
}
/* === 侧边栏折叠样式（手动折叠 + 窄屏自动） === */
.sidebar.collapsed {
width: 64px;
}
.sidebar.collapsed .sidebar-logo .logo-text,
.sidebar.collapsed .sidebar-tag,
.sidebar.collapsed .nav-item .nav-label,
.sidebar.collapsed .nav-item .nav-count,
.sidebar.collapsed .sidebar-new-btn span,
.sidebar.collapsed .today-sub-nav,
.sidebar.collapsed .sidebar-logout-btn span {
display: none !important;
}
/* 折叠态下隐藏「今日跟进」展开箭头（::after 三角） */
.sidebar.collapsed .nav-item[data-toptab="today"]::after {
display: none;
}
.sidebar.collapsed .nav-item {
grid-template-columns: 1fr;
justify-items: center;
justify-content: center;
padding: 12px;
}
.sidebar.collapsed .sidebar-new-btn {
padding: 11px;
}
.sidebar.collapsed .sidebar-header {
padding: 14px 8px 10px;
justify-content: center;
}
.sidebar.collapsed .sidebar-logo {
display: none;
}
/* 折叠按钮：与搜索按钮一起放在品牌栏右侧 */
.sidebar-collapse-btn {
position: static;
width: 24px;
height: 24px;
padding: 0;
border-radius: 4px;
background: transparent;
border: 1px solid transparent;
color: var(--ink-mute);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
z-index: 2;
flex-shrink: 0;
}
.sidebar-collapse-btn:hover {
background: rgba(255, 255, 255, 0.7);
color: var(--ink);
border-color: var(--line);
}
.sidebar-header { position: relative; }
/* 折叠态下：只保留折叠按钮 */
.sidebar.collapsed .sidebar-search-btn {
display: none;
}
.sidebar.collapsed .sidebar-header-actions {
margin-left: 0;
}
.sidebar.collapsed .sidebar-collapse-btn {
position: static;
margin: 0;
width: 28px;
height: 28px;
}
/* 折叠态下「今日跟进」flyout 浮层 */
.collapsed-flyout {
position: fixed;
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
border-radius: 8px;
padding: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
z-index: 1000;
min-width: 180px;
display: none;
flex-direction: column;
gap: 2px;
}
.collapsed-flyout.open { display: flex; }
.collapsed-flyout .today-sub-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border-radius: 6px;
background: transparent;
border: none;
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink-soft);
cursor: pointer;
text-align: left;
width: 100%;
margin: 0;
}
.collapsed-flyout .today-sub-item:hover {
background: var(--bg-sunken);
color: var(--ink);
}
.collapsed-flyout .today-sub-item.active {
background: var(--bg-sunken);
color: var(--ink);
font-weight: 600;
}
.collapsed-flyout .today-sub-count {
background: rgba(207, 206, 191, 0.5);
color: var(--ink-soft);
padding: 1px 7px;
border-radius: 9px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
flex-shrink: 0;
}
/* === 左右布局 app-shell === */
body { overflow: hidden; } /* 整体不滚动，内容区独立滚动 */
.app-shell {
display: flex;
height: 100vh;
width: 100%;
}
/* === 左侧栏 === */
.sidebar {
width: 240px;
flex-shrink: 0;
background: #F1EFE8;
border-right: 1px solid var(--line-strong);
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.sidebar-header {
padding: 22px 18px 18px;
border-bottom: 1px solid rgba(207, 206, 191, 0.4);
display: flex;
align-items: center;
gap: 8px;
}
.sidebar-logo {
display: flex; align-items: center; gap: 10px;
flex: 1;
min-width: 0;
font-family: var(--font-serif); font-style: italic;
font-size: 22px; font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
}
.sidebar-header-actions {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.sidebar-search-btn {
width: 30px;
height: 30px;
padding: 0;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--ink-soft);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.sidebar-search-btn:hover {
background: rgba(255, 255, 255, 0.72);
border-color: var(--line);
color: var(--ink);
}
.sidebar-search-btn:focus-visible {
outline: 2px solid var(--apple-blue);
outline-offset: 2px;
}
.sidebar-search-btn svg {
width: 20px;
height: 20px;
stroke-width: 1.7;
}
.sidebar-logo .logo-icon {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #5f9fca;
flex-shrink: 0;
}
.sidebar-tag {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-mute);
margin-top: 6px;
padding-left: 30px;
}
.sidebar-nav {
flex: 1;
min-height: 0; /* 关键: flex child 默认 min-height:auto, 设 0 才能 shrink + overflow-y:auto 生效 */
padding: 14px 10px;
display: flex; flex-direction: column;
gap: 2px;
overflow-y: auto;
scroll-behavior: smooth;
scrollbar-width: thin;
}
/* sidebar-flex-v1: 禁止子元素 flex-shrink, 否则父空间紧张时 max-height 会被强压 */
.sidebar-nav > * { flex-shrink: 0; }
/* sidebar-nav 滚动条加强可见(只在 sidebar-nav 内,不影响别处)*/
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.32); }
.nav-item {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) minmax(34px, auto);
align-items: center;
column-gap: 10px;
padding: 10px 12px;
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
font-family: var(--font-sans);
font-size: 15.5px;
font-weight: 500;
color: var(--ink-soft);
text-align: left;
width: 100%;
transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
}
.nav-item:hover {
background: rgba(255, 255, 255, 0.6);
color: var(--ink);
}
.nav-item.active {
background: var(--bg-elevated);
color: var(--ink);
font-weight: 600;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.nav-item .nav-icon {
width: 28px;
height: 22px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: var(--ink-mute);
}
.nav-item .nav-icon svg {
width: 20px;
height: 20px;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.nav-item.active .nav-icon { color: var(--ink); }
.nav-item:hover .nav-icon { color: var(--ink-soft); }
.nav-item .nav-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.nav-item .nav-count {
background: rgba(207, 206, 191, 0.5);
color: var(--ink-soft);
height: 22px;
min-width: 38px;
padding: 0 9px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0;
flex-shrink: 0;
text-align: right;
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.nav-item.active .nav-count {
background: var(--ink);
color: var(--bg);
}
.nav-item .nav-count.today-count.has-danger {
background: var(--danger-bg);
color: var(--danger);
}
.nav-item .nav-count.today-count.has-warn {
background: var(--warn-bg);
color: var(--warn);
}
.nav-item.active .nav-count.today-count.has-danger {
background: var(--danger);
color: white;
}
.nav-item.active .nav-count.today-count.has-warn {
background: var(--warn);
color: white;
}
/* 今日跟进子菜单 */
.today-sub-nav {
display: flex;
flex-direction: column;
padding: 0 0 4px 0;
margin: 0 10px 2px 32px;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, padding 0.2s ease;
}
.today-sub-nav.open {
max-height: 360px; /* 够装 5 个 sub-item · 大缩放也 OK */
opacity: 1;
padding: 4px 0 8px 0;
}
.today-sub-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 10px 5px 12px;
margin: 0;
border: none;
background: transparent;
font-family: var(--font-sans);
font-size: 12px;
color: var(--ink-mute);
cursor: pointer;
border-radius: 6px;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
white-space: nowrap;
letter-spacing: -0.01em;
position: relative;
}
.today-sub-item::before {
content: '';
position: absolute;
left: -1px;
top: 6px;
bottom: 6px;
width: 2px;
border-radius: 1px;
background: transparent;
transition: background 0.15s ease;
}
.today-sub-item:hover {
background: rgba(0, 0, 0, 0.035);
color: var(--ink);
}
.today-sub-item.active {
background: rgba(0, 122, 255, 0.08);
color: var(--apple-blue, #007AFF);
font-weight: 600;
}
.today-sub-item.active::before {
background: var(--apple-blue, #007AFF);
}
.today-sub-count {
font-size: 10.5px;
min-width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
border-radius: 8px;
background: rgba(0, 0, 0, 0.05);
color: var(--ink-mute);
font-weight: 600;
font-family: var(--font-mono, monospace);
}
.today-sub-item.active .today-sub-count {
background: rgba(0, 122, 255, 0.15);
color: var(--apple-blue, #007AFF);
}
/* 数量为0时淡化 */
.today-sub-item .today-sub-count.is-zero {
opacity: 0.35;
}
/* 今日跟进展开箭头（旧父级入口保留兼容；当前已拆成一级入口） */
.nav-item.today-parent-nav[data-toptab="today"] .nav-label {
position: relative;
}
.nav-item.today-parent-nav[data-toptab="today"]::after {
content: '';
width: 5px;
height: 5px;
border-right: 1.5px solid var(--ink-mute);
border-bottom: 1.5px solid var(--ink-mute);
transform: rotate(45deg);
transition: transform 0.2s ease;
margin-left: auto;
margin-right: 4px;
opacity: 0.5;
}
.nav-item.today-parent-nav[data-toptab="today"].sub-open::after {
transform: rotate(-135deg);
}
.nav-item.today-entry-nav::after {
display: none !important;
}
.sidebar-footer {
padding: 14px;
border-top: 1px solid rgba(207, 206, 191, 0.4);
}
.sidebar-new-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 14px;
border-radius: 6px;
font-size: 13.5px;
border: none;
cursor: pointer;
background: var(--ink);
color: var(--bg);
font-weight: 600;
font-family: var(--font-sans);
}
.sidebar-new-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* === 右侧主内容区 === */
.content-area {
flex: 1;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
min-width: 0;
}
/* 控制条调整 */
.controls {
margin: 0;
padding: 16px 28px;
border-bottom: 1px solid var(--line);
background: var(--bg);
flex-shrink: 0;
}
main#main {
flex: 1;
overflow-y: auto;
padding: 28px;
margin: 0;
max-width: none;
}
/* 旧的 .top-tabs 完全去掉（用 sidebar 替代） */
.top-tabs { display: none !important; }
/* 大标题 / 底部按钮微调 */
header { display: none; }
/* 在小屏上侧边栏可能要折叠（暂时简单处理 — 桌面优先） */
@media (max-width: 900px) {
.sidebar {
width: 64px;
}
.sidebar-logo,
.sidebar-tag,
.sidebar-search-btn,
.nav-item .nav-label,
.nav-item .nav-count,
.sidebar-new-btn span {
display: none;
}
.nav-item {
grid-template-columns: 1fr;
justify-items: center;
justify-content: center;
padding: 12px;
}
.sidebar-header {
justify-content: center;
}
.sidebar-header-actions {
margin-left: 0;
}
.sidebar-new-btn {
padding: 11px;
}
main#main { padding: 16px; }
.controls { padding: 12px 16px; }
}
/* 内容区 max-width 容器 */
main#main > * {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
/* 侧栏折叠时，content-area 已经收到 64px，内容区自然撑满；
但 max-width: 1600 + margin auto 居中可能在大屏下仍留空白，所以折叠态取消居中 */
body.sidebar-collapsed main#main > * {
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* 折叠态下卡片最小宽度从 360 降到 320，让宽屏下能多挤一列出来；
展开态保持 360 不变，避免卡片内徽章换行 */
body.sidebar-collapsed .today-cards-po {
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
body.sidebar-collapsed .today-cards-dev {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
body.sidebar-collapsed .today-cards {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
/* === 大货跟进看板：按日期分列 === */
.prod-board {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
align-items: start;
}
.prod-board-col {
background: var(--bg-sunken);
border-radius: 6px;
border: 1px solid var(--line);
display: flex;
flex-direction: column;
min-height: 200px;
}
.prod-board-col-header {
padding: 14px 14px 12px;
border-bottom: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 4px;
}
.prod-board-col-header .date-title {
font-family: var(--font-serif); font-style: italic;
font-size: 18px; font-weight: 400;
color: var(--ink);
letter-spacing: -0.005em;
}
.prod-board-col-header .date-sub {
display: flex; align-items: center; justify-content: space-between;
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.prod-board-col-header .date-sub .count {
background: var(--bg-elevated);
padding: 2px 8px; border-radius: 10px;
font-weight: 600;
}
.prod-board-col.col-overdue { border-color: var(--danger); }
.prod-board-col.col-overdue .prod-board-col-header { background: #5C1A0F; }
.prod-board-col.col-overdue .prod-board-col-header .date-title { color: white; }
.prod-board-col.col-overdue .prod-board-col-header .date-sub { color: rgba(255,255,255,0.7); }
.prod-board-col.col-overdue .prod-board-col-header .date-sub .count { background: rgba(0,0,0,0.3); color: white; }
.prod-board-col.col-danger { border-color: rgba(168, 50, 29, 0.3); }
.prod-board-col.col-danger .prod-board-col-header { background: var(--danger-bg); }
.prod-board-col.col-danger .prod-board-col-header .date-title { color: var(--danger); }
.prod-board-col.col-danger .prod-board-col-header .date-sub { color: var(--danger); opacity: 0.7; }
.prod-board-col.col-warn { border-color: rgba(168, 109, 29, 0.3); }
.prod-board-col.col-warn .prod-board-col-header { background: var(--warn-bg); }
.prod-board-col.col-warn .prod-board-col-header .date-title { color: var(--warn); }
.prod-board-col.col-warn .prod-board-col-header .date-sub { color: var(--warn); opacity: 0.7; }
.prod-board-col.col-ok { border-color: rgba(43, 106, 63, 0.2); }
.prod-board-col.col-ok .prod-board-col-header { background: var(--ok-bg); }
.prod-board-col.col-ok .prod-board-col-header .date-title { color: var(--ok); }
.prod-board-col.col-ok .prod-board-col-header .date-sub { color: var(--ok); opacity: 0.7; }
.prod-board-col.col-done .prod-board-col-header { background: var(--bg-sunken); }
.prod-board-col.col-done .prod-board-col-header .date-title {
color: var(--ok); font-style: normal;
font-family: var(--font-sans); font-size: 14px; font-weight: 600;
}
.prod-board-items {
padding: 10px;
display: flex; flex-direction: column;
gap: 8px;
flex: 1;
}
.prod-board-card {
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
border-top: 3px solid;
border-radius: 4px;
padding: 10px 12px;
cursor: pointer;
transition: transform 0.1s, box-shadow 0.1s;
}
.prod-board-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.prod-board-card.stage-bg-dev { border-top-color: var(--stage-dev); }
.prod-board-card.stage-bg-revise { border-top-color: var(--stage-revise); }
.prod-board-card.stage-bg-prod { border-top-color: var(--stage-prod); }
.prod-board-card.stage-bg-await-fit { border-top-color: var(--warn); }
.prod-board-card.stage-bg-done { border-top-color: var(--ok); }
.prod-board-card-stage-pill {
display: inline-block;
padding: 2px 6px; margin-bottom: 6px;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.06em; font-weight: 600;
border-radius: 6px; text-transform: uppercase;
}
.prod-board-card-top {
display: flex; gap: 10px; margin-bottom: 8px;
align-items: flex-start;
}
.prod-board-card .thumb,
.prod-board-card .thumb-placeholder {
width: 44px; height: 58px;
flex-shrink: 0;
}
.prod-board-card-info {
flex: 1; min-width: 0;
}
.prod-board-card-sku {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute); margin-bottom: 2px;
}
.prod-board-card-name {
font-size: 12.5px; font-weight: 500; line-height: 1.3;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.prod-board-card-po {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-soft);
padding: 6px 0; border-top: 1px dashed var(--line);
}
.prod-board-card-po .po-color {
color: var(--ink-mute);
}
.prod-board-card-bottom {
display: flex; align-items: center; justify-content: space-between;
padding-top: 6px; border-top: 1px dashed var(--line);
font-size: 11px;
}
.prod-board-card-bottom .node-info {
font-size: 11px; color: var(--ink-soft);
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod-board-card-bottom .node-info.danger { color: var(--danger); font-weight: 600; }
.prod-board-card-bottom .node-info.warn { color: var(--warn); font-weight: 600; }
/* ============================================================
苹果风改造 (Apple-style refinement)
============================================================ */
/* === 字体相关 body 设置(token 已全部统一到顶部 :root) === */
body {
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.011em;
background: var(--bg-soft-gradient);
}
/* === 全局过渡动画 === */
button, .nav-item, .filter-btn, .top-tab, .style-row, .today-card,
.board-card, .prod-board-card, .po-item, .log-entry, .meta-item,
.detail-image-mini, .thumb-zoomable, .image-change-mini-btn,
.more-filters-btn, .ef-date-filter, input, select, textarea,
.production-row, .stage-tag, .client-badge, .show-po-toggle {
transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
/* === 圆角全局放大 === */
.btn-new, .sidebar-new-btn,
.filter-btn,
.outcome-option,
.po-card, .po-item,
.notes-section, .snooze-hint, .follow-up-hint,
.modal, .drawer,
.empty,
.update-modal,
.image-modal,
.style-row.simplified,
.list-header.simplified,
.production-row,
.production-list-header,
.production-group,
.date-group .production-list,
.board-card,
.prod-board-card,
.prod-board-col,
.today-card,
.archive-section .style-list,
.image-dropzone,
.controls,
.more-filters-panel,
.ef-date-filter,
.show-po-toggle,
.image-viewer-img,
.image-viewer-close {
border-radius: 12px !important;
}
/* 较小的元素用稍小圆角 — 列表卡片所有属性 chip 统一 8px,不再混搭 */
.stage-tag, .client-badge, .po-num, .po-qty,
.sample-type-badge, .category-badge, .dev-size-badge,
.group-badge, .factory-badge, .color-badge-inline,
.days-cell, .urgency-pill, .current-stage-pill,
.board-card-stage-pill, .prod-board-card-stage-pill,
.count-badge, .nav-count, .top-tab .count,
.kbd-hint, input[type="text"], input[type="date"],
input[type="number"], select, textarea,
button.cancel, button.confirm, button.danger,
.filter-btn,
.image-change-mini-btn,
.more-filters-btn,
.po-add-btn, .po-add-row-btn, .po-row-remove,
.notes-edit-btn,
.dev-since-tag {
border-radius: 8px !important;
}
/* 输入框圆角 */
.search input, #search,
.form-field input, .form-field select, .form-field textarea {
border-radius: 8px !important;
transition: border-color 0.18s, box-shadow 0.18s;
}
.search input:focus, #search:focus,
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
border-color: var(--apple-blue) !important;
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
outline: none !important;
}
/* === 侧边栏：毛玻璃 === */
.sidebar {
background: rgba(241, 239, 232, 0.7);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-right: 1px solid rgba(207, 206, 191, 0.5);
}
/* nav-item 选中态：更柔和 */
.nav-item {
border-radius: 10px;
}
.nav-item.active {
background: var(--bg-elevated);
box-shadow: var(--shadow-sm);
}
.nav-item:hover:not(.active) {
background: rgba(255, 255, 255, 0.7);
}
.nav-item:active {
transform: scale(0.98);
}
/* === 按钮 === */
button:active:not(:disabled) {
transform: scale(0.97);
}
.btn-new, .sidebar-new-btn {
background: var(--ink);
border-radius: 10px;
font-weight: 600;
letter-spacing: -0.01em;
box-shadow: var(--shadow-sm);
}
.btn-new:hover, .sidebar-new-btn:hover {
background: #2a2a1f;
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
/* primary 按钮用苹果蓝 */
.drawer-actions button.primary,
button.confirm {
background: var(--apple-blue);
border-radius: 8px;
font-weight: 600;
border: none;
color: white;
padding: 9px 18px;
box-shadow: 0 2px 6px rgba(0, 122, 255, 0.18);
}
.drawer-actions button.primary:hover,
button.confirm:hover {
background: var(--apple-blue-hover);
box-shadow: 0 4px 10px rgba(0, 122, 255, 0.25);
transform: translateY(-1px);
}
/* iOS 风 cancel：与 confirm 视觉同级，柔和灰底 */
.modal-footer button.cancel,
button.cancel {
background: rgba(120, 120, 128, 0.08);
border: none !important;
border-radius: 8px;
color: var(--ink);
font-weight: 600;
padding: 9px 18px;
transition: background 0.18s, transform 0.18s;
}
.modal-footer button.cancel:hover,
button.cancel:hover {
background: rgba(120, 120, 128, 0.16);
transform: translateY(-1px);
}
.modal-footer button.cancel:active,
button.cancel:active {
transform: translateY(0);
background: rgba(120, 120, 128, 0.22);
}
/* ============================================================
批量完成模态框 — iOS 风内容样式
============================================================ */
.batch-modal {
padding: 22px 24px;
display: flex;
flex-direction: column;
gap: 20px;
}
.batch-modal-summary {
background: rgba(120, 120, 128, 0.06);
padding: 14px 16px;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
.batch-modal-summary-title {
font-size: 12.5px;
color: var(--ink-soft);
letter-spacing: 0.01em;
}
.batch-modal-summary-title strong {
color: var(--apple-blue);
font-size: 16px;
font-weight: 600;
margin: 0 2px;
}
.batch-modal-skus {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-height: 120px;
overflow-y: auto;
padding-right: 4px;
}
.batch-modal-sku-chip {
background: var(--bg-elevated);
border: 1px solid var(--line);
padding: 4px 10px;
border-radius: 6px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink);
letter-spacing: 0.01em;
white-space: nowrap;
}
.batch-modal-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.batch-modal-field-label {
font-size: 13px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.01em;
}
.batch-modal-field-label .optional {
color: var(--ink-mute);
font-weight: 400;
font-size: 12px;
margin-left: 4px;
}
.batch-modal-field input[type="date"],
.batch-modal-field input[type="text"],
.batch-modal-field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 8px;
font-size: 14px;
font-family: var(--font-sans);
background: var(--bg-elevated);
transition: border-color 0.18s, box-shadow 0.18s;
}
.batch-modal-field input[type="date"] {
font-family: var(--font-mono);
}
.batch-modal-field textarea {
min-height: 80px;
resize: vertical;
}
.batch-modal-field input:focus,
.batch-modal-field textarea:focus {
border-color: var(--apple-blue);
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
outline: none;
}
.batch-modal-radio-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.batch-modal-radio {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 10px;
cursor: pointer;
transition: background 0.18s, border-color 0.18s;
font-size: 13px;
}
.batch-modal-radio:hover {
background: rgba(0, 122, 255, 0.04);
border-color: var(--apple-blue);
}
.batch-modal-radio input[type="radio"] {
margin: 0;
accent-color: var(--apple-blue);
}
.batch-modal-radio:has(input:checked) {
background: rgba(0, 122, 255, 0.08);
border-color: var(--apple-blue);
}
/* === 卡片悬浮提升 === */
.style-row.simplified:hover {
background: var(--bg-elevated) !important;
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
z-index: 1;
position: relative;
}
.today-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: rgba(0, 0, 0, 0.08);
}
.board-card:hover, .prod-board-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* === 抽屉：滑入动画 + 大圆角 === */
.drawer {
border-radius: 16px 0 0 16px;
box-shadow: var(--shadow-xl);
transform: translateX(100%);
transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.drawer.open {
transform: translateX(0);
}
.drawer-backdrop {
background: rgba(15, 15, 10, 0.35);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
transition: opacity 0.25s;
}
/* === 弹窗：从中心放大 === */
.modal-backdrop {
background: rgba(15, 15, 10, 0.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.modal, .update-modal, .image-modal {
border-radius: 16px !important;
box-shadow: var(--shadow-xl);
animation: modalIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* === 列表行：苹果风的清淡感 === */
.style-row.simplified, .production-row.with-node {
border: 1px solid transparent !important;
border-bottom: 1px solid var(--line) !important;
margin-bottom: 0;
border-left: none !important;
}
.style-row.simplified:last-child,
.production-row.with-node:last-child {
border-bottom: none !important;
}
/* 紧迫度色边改成左侧细线（更隐约） */
.style-row.urgent-danger, .production-row.urgent-danger {
box-shadow: inset 3px 0 0 var(--danger);
}
.style-row.urgent-warn, .production-row.urgent-warn {
box-shadow: inset 3px 0 0 var(--warn);
}
.style-row.recently-updated {
box-shadow: inset 3px 0 0 #C4B97A;
}
.style-row.urgent-danger.recently-updated {
box-shadow: inset 3px 0 0 var(--danger);
}
.style-row.urgent-warn.recently-updated {
box-shadow: inset 3px 0 0 var(--warn);
}
/* === stage-tag 苹果胶囊感 === */
.stage-tag {
font-weight: 600;
letter-spacing: 0.02em;
padding: 3px 10px !important;
text-transform: none !important;
}
/* === 输入控件焦点蓝色光晕 === */
.search:focus-within {
border-color: var(--apple-blue);
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}
/* === filter-btn 用苹果分段控件感 === */
.filter-group {
background: var(--bg-sunken);
padding: 3px;
border-radius: 9px;
gap: 0 !important;
border: none !important;
}
.filter-btn {
border: none !important;
border-radius: 7px !important;
padding: 5px 12px !important;
font-weight: 500;
background: transparent !important;
color: var(--ink-soft) !important;
}
.filter-btn:hover {
background: rgba(255, 255, 255, 0.5) !important;
color: var(--ink) !important;
}
.filter-btn.active {
background: var(--bg-elevated) !important;
color: var(--ink) !important;
box-shadow: var(--shadow-xs);
}
/* === 视图切换 === */
.view-toggle {
background: var(--bg-sunken);
padding: 3px;
border-radius: 9px;
border: none !important;
}
.view-toggle button {
border: none !important;
border-radius: 7px !important;
padding: 5px 14px !important;
background: transparent !important;
color: var(--ink-soft) !important;
font-weight: 500;
}
.view-toggle button.active {
background: var(--bg-elevated) !important;
color: var(--ink) !important;
box-shadow: var(--shadow-xs);
}
/* === 控制条 === */
.controls {
border-radius: 0;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--line);
}
/* === 缩略图柔化 === */
.thumb, .thumb-placeholder, .thumb-mini, .thumb-mini-placeholder,
.detail-image-mini, .detail-image-mini-placeholder {
border-radius: 8px !important;
border-color: var(--line) !important;
}
/* === 数字徽章用苹果通知红 === */
.nav-count.today-count.has-danger {
background: #FF3B30 !important;
color: white !important;
font-weight: 700;
}
.nav-item.active .nav-count.today-count.has-danger {
background: #FF3B30 !important;
color: white !important;
}
/* === 动效细节 === */
.style-row, .today-card, .board-card, .prod-board-card,
.po-item, .log-entry {
cursor: pointer;
}
.style-row:active, .today-card:active,
.board-card:active, .prod-board-card:active {
transform: scale(0.998) !important;
}
/* === 抽屉头部更精致 === */
.drawer-header {
border-bottom: 1px solid var(--line);
padding: 24px 28px 18px;
}
.drawer-title h2 {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.018em;
}
.drawer-close {
border-radius: 8px;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: var(--bg-sunken);
border: none;
}
.drawer-close:hover {
background: var(--line);
}
/* === 阶段进度小条美化 === */
.stage-bar {
padding: 4px 0;
}
.stage-dot {
border-radius: 50% !important;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, opacity 0.2s, box-shadow 0.2s;
}
.stage-dot.current {
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);
}
/* 跳到下一阶段按钮 */
.jump-stage-btn {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
padding: 6px 12px;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--ink-soft);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
letter-spacing: 0.01em;
}
.jump-stage-btn:hover {
background: var(--ink);
color: var(--bg-elevated);
border-color: var(--ink);
transform: translateX(2px);
}
/* === today-card 内的小标 === */
.count-badge {
font-weight: 600;
letter-spacing: 0;
}
/* === 段落标题 serif 体保留更精致 === */
.today-section h2,
.archive-section h2,
.section-title {
letter-spacing: -0.015em;
}
/* === 日期组头部（大货跟进列表） === */
.date-group-header {
border-radius: 12px 12px 0 0 !important;
border: 1px solid var(--line);
border-bottom: none;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.date-group .production-list {
border-radius: 0 0 12px 12px !important;
}
/* === 看板列卡片 === */
.prod-board-col {
background: rgba(243, 242, 236, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--line);
}
.prod-board-col-header {
border-radius: 12px 12px 0 0;
}
/* === 滚动条美化（macOS 风格） === */
::-webkit-scrollbar {
width: 8px; height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
/* === 选中文字颜色 === */
::selection {
background: rgba(0, 122, 255, 0.2);
}
/* === 图片查看器：iOS 风 === */
.image-viewer-backdrop {
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.image-viewer-img {
border-radius: 8px;
animation: imgZoomIn 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes imgZoomIn {
from {
opacity: 0;
transform: scale(0.92);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* === po 卡片在抽屉中 === */
.po-card {
background: var(--bg-elevated);
border: 1px solid var(--line);
box-shadow: var(--shadow-xs);
margin-bottom: 16px;
}
.po-item {
background: var(--bg-sunken);
margin-bottom: 6px;
padding: 10px 12px !important;
}
.po-item:hover {
background: var(--bg-elevated);
box-shadow: var(--shadow-xs);
}
/* === notes / snooze / follow-up hint 苹果柔和卡片 === */
.notes-section, .snooze-hint, .follow-up-hint {
border-radius: 12px;
border: none;
box-shadow: var(--shadow-xs);
}
.follow-up-hint.lvl-danger {
background: rgba(255, 59, 48, 0.08);
}
.follow-up-hint.lvl-warn {
background: rgba(255, 149, 0, 0.10);
}
.snooze-hint {
background: rgba(255, 204, 0, 0.10);
border: 1px solid rgba(255, 204, 0, 0.20);
}
/* 角色只读提示(actions 区角色无权时显示) */
.role-readonly-hint {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: var(--bg-sunken);
color: var(--ink-soft);
border-radius: 8px;
font-size: 12.5px;
font-style: italic;
}
.role-readonly-hint .hint-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--ink-mute);
flex-shrink: 0;
}
/* === 列表头部更轻盈 === */
.list-header.simplified, .production-list-header {
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--line) !important;
font-family: var(--font-mono);
font-size: 11px !important;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500 !important;
}
/* === 品牌 logo 字体微调 === */
.sidebar-logo {
letter-spacing: -0.02em;
}
/* === badge 客户标签 === */
.client-badge {
border-radius: 6px !important;
font-weight: 600;
letter-spacing: 0.04em;
}
/* === 总开发时长标签（dev-since-tag） === */
.dev-since-tag {
background: var(--bg-sunken);
padding: 4px 10px !important;
font-size: 11px;
}
/* === 更多筛选按钮 === */
.more-filters-btn {
background: var(--bg-sunken) !important;
border: none !important;
border-radius: 8px !important;
padding: 6px 12px !important;
}
.more-filters-btn.open {
background: var(--ink) !important;
color: var(--bg) !important;
}
/* === 看板卡片细节 === */
.board-card, .prod-board-card {
background: var(--bg-elevated);
border: 1px solid var(--line);
box-shadow: var(--shadow-xs);
}
/* === 详情抽屉折叠区 === */
.detail-collapse {
border-top: 1px solid var(--line);
margin-top: 20px;
padding-top: 16px;
}
/* ============================================================
现代苹果色系 (token 已统一到顶部 :root,这里只保留派生规则)
============================================================ */
/* 重新应用 body 背景 */
body {
background: var(--bg-soft-gradient);
color: var(--ink);
letter-spacing: -0.011em;
}
/* === 侧边栏：冷灰毛玻璃 === */
.sidebar {
background: rgba(235, 235, 239, 0.65);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-right: 1px solid rgba(209, 209, 214, 0.5);
}
.sidebar-header {
border-bottom: 1px solid rgba(209, 209, 214, 0.4);
}
.sidebar-footer {
border-top: 1px solid rgba(209, 209, 214, 0.4);
}
.nav-item .nav-count {
background: rgba(120, 120, 128, 0.16);
color: var(--ink-soft);
}
.nav-item.active .nav-count {
background: var(--ink);
color: white;
}
/* === 控制条毛玻璃，更冷 === */
.controls {
background: rgba(245, 245, 247, 0.72);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--line);
}
/* === 客户标签：苹果柔和 chip === */
.client-badge {
font-weight: 600;
letter-spacing: 0.04em;
padding: 3px 8px !important;
border-radius: 6px !important;
max-width: 100%;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: #EEF4FB;
color: #24506F;
border: 1px solid #CFDDEA;
}
.client-badge.client-boohoo {
background: #1D1D1F;
color: white;
border-color: #1D1D1F;
}
.client-badge.client-plt {
background: #FFE5EC;
color: #B5145C;
border-color: #F7CAD7;
}
/* === stage-tag：低饱和苹果色 === */
.stage-tag.dev,
.node-block-row1 .stage-tag.dev,
.prod-board-card-stage-pill.dev {
background: var(--stage-dev-bg) !important;
color: var(--stage-dev) !important;
border: none !important;
}
.stage-tag.revise,
.node-block-row1 .stage-tag.revise,
.prod-board-card-stage-pill.revise {
background: var(--stage-revise-bg) !important;
color: var(--stage-revise) !important;
border: none !important;
}
.stage-tag.prod,
.node-block-row1 .stage-tag.prod,
.prod-board-card-stage-pill.prod {
background: var(--stage-prod-bg) !important;
color: var(--stage-prod) !important;
border: none !important;
}
.stage-tag.await-fit,
.node-block-row1 .stage-tag.await-fit,
.prod-board-card-stage-pill.await-fit {
background: var(--await-fit-bg) !important;
color: var(--await-fit) !important;
border: none !important;
}
.stage-tag.done,
.node-block-row1 .stage-tag.done {
background: var(--stage-done-bg) !important;
color: var(--stage-done) !important;
border: none !important;
}
.stage-tag.archived {
background: var(--stage-archived-bg) !important;
color: var(--stage-archived) !important;
}
/* === 阶段背景渐变（行底色）调成更冷 === */
.style-row.simplified.stage-bg-dev {
background: linear-gradient(to right, #FAF6FE, var(--bg-elevated) 30%) !important;
}
.style-row.simplified.stage-bg-revise {
background: linear-gradient(to right, #FFFAF1, var(--bg-elevated) 30%) !important;
}
.style-row.simplified.stage-bg-prod {
background: linear-gradient(to right, #F4F8FF, var(--bg-elevated) 30%) !important;
}
.style-row.simplified.stage-bg-await-fit {
background: linear-gradient(to right, #FFFCEA, var(--bg-elevated) 30%) !important;
}
.production-row.with-node.stage-bg-dev {
background: linear-gradient(to right, #FAF6FE, var(--bg-elevated) 30%) !important;
}
.production-row.with-node.stage-bg-revise {
background: linear-gradient(to right, #FFFAF1, var(--bg-elevated) 30%) !important;
}
.production-row.with-node.stage-bg-prod {
background: linear-gradient(to right, #F4F8FF, var(--bg-elevated) 30%) !important;
}
.production-row.with-node.stage-bg-await-fit {
background: linear-gradient(to right, #FFFCEA, var(--bg-elevated) 30%) !important;
}
/* hover 统一冷白 */
.style-row.simplified:hover,
.production-row.with-node:hover {
background: var(--bg-elevated) !important;
box-shadow: var(--shadow-sm);
}
/* === 看板卡片顶部色条用新色 === */
.board-card.stage-bg-dev,
.prod-board-card.stage-bg-dev {
border-top-color: var(--stage-dev);
}
.board-card.stage-bg-revise,
.prod-board-card.stage-bg-revise {
border-top-color: var(--stage-revise);
}
.board-card.stage-bg-prod,
.prod-board-card.stage-bg-prod {
border-top-color: var(--stage-prod);
}
.board-card.stage-bg-await-fit,
.prod-board-card.stage-bg-await-fit {
border-top-color: var(--await-fit-strong);
}
.prod-board-card.stage-bg-done {
border-top-color: var(--ok);
}
/* === 抽屉色条 === */
.drawer-stage-bar.dev { background: var(--stage-dev); }
.drawer-stage-bar.revise { background: var(--stage-revise); }
.drawer-stage-bar.prod { background: var(--stage-prod); }
.drawer-stage-bar.await-fit { background: var(--await-fit-strong); }
.drawer-stage-bar.done { background: var(--ok); }
.drawer-stage-bar.archived { background: var(--stage-archived); }
/* === 卡片视觉 === */
.po-card, .notes-section,
.board-card, .prod-board-card,
.today-card {
background: var(--bg-elevated);
border: 1px solid var(--line);
box-shadow: var(--shadow-xs);
}
.board-card:hover, .prod-board-card:hover, .today-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--line-strong);
}
/* === 段落标题更冷感 === */
.section-title,
.today-section h2,
.archive-section h2 {
color: var(--ink);
letter-spacing: -0.018em;
}
/* === 节点状态颜色 === */
.node-name.danger,
.current-node-display .node-name.danger {
color: var(--danger);
}
.node-name.warn,
.current-node-display .node-name.warn {
color: var(--warn);
}
.node-name.done {
color: var(--ok-soft);
}
.node-since.danger { color: var(--danger); }
.node-since.warn { color: var(--warn); }
.node-since.done { color: var(--ok-soft); }
/* === 紧迫度色边重新用 iOS 红 === */
.style-row.urgent-danger,
.production-row.urgent-danger {
box-shadow: inset 3px 0 0 var(--danger);
}
.style-row.urgent-warn,
.production-row.urgent-warn {
box-shadow: inset 3px 0 0 var(--warn);
}
/* === today 数字徽章用 iOS 通知红 === */
.nav-count.today-count.has-danger {
background: #FF3B30 !important;
color: white !important;
}
.nav-count.today-count.has-warn {
background: #FF9500 !important;
color: white !important;
}
/* === today-section 标签 === */
.count-badge.danger {
background: rgba(255, 59, 48, 0.10);
color: var(--danger);
}
.count-badge.warn {
background: rgba(255, 149, 0, 0.12);
color: var(--warn);
}
.count-badge.fit {
background: var(--await-fit-bg);
color: var(--await-fit);
}
/* === 大货按日期分组的颜色（headers） === */
.date-group.date-danger .date-group-header {
background: var(--danger-bg);
}
.date-group.date-danger .date-group-header .date-main {
color: var(--danger);
}
.date-group.date-warn .date-group-header {
background: var(--warn-bg);
}
.date-group.date-warn .date-group-header .date-main {
color: var(--warn);
}
.date-group.date-ok .date-group-header {
background: var(--ok-bg);
}
.date-group.date-ok .date-group-header .date-main {
color: var(--ok-soft);
}
/* === 看板列头部 === */
.prod-board-col.col-danger .prod-board-col-header { background: var(--danger-bg); }
.prod-board-col.col-danger .prod-board-col-header .date-title { color: var(--danger); }
.prod-board-col.col-warn .prod-board-col-header { background: var(--warn-bg); }
.prod-board-col.col-warn .prod-board-col-header .date-title { color: var(--warn); }
.prod-board-col.col-ok .prod-board-col-header { background: var(--ok-bg); }
.prod-board-col.col-ok .prod-board-col-header .date-title { color: var(--ok-soft); }
/* === 状态条 === */
.days-cell.days-danger { color: var(--danger); }
.days-cell.days-warn { color: var(--warn); }
.days-cell.days-done { color: var(--ok-soft); }
.days-indicator {
background: currentColor !important;
width: 6px; height: 6px;
}
/* === 主操作按钮 - 苹果蓝 === */
.drawer-actions button.primary,
button.confirm,
.controls button.confirm {
background: var(--apple-blue);
color: white;
font-weight: 600;
letter-spacing: -0.005em;
box-shadow: 0 2px 6px rgba(0, 122, 255, 0.18);
}
/* === 危险按钮 === */
button.danger,
.drawer-actions button.danger {
background: rgba(255, 59, 48, 0.10);
color: var(--danger);
border: none;
font-weight: 600;
}
button.danger:hover {
background: rgba(255, 59, 48, 0.16);
}
/* === filter group 用更冷的灰 === */
.filter-group, .view-toggle {
background: rgba(120, 120, 128, 0.12);
}
.filter-btn.active, .view-toggle button.active {
background: var(--bg-elevated) !important;
color: var(--ink) !important;
}
/* === 输入框 - 苹果聚焦光晕 === */
input[type="text"], input[type="date"], input[type="number"], select, textarea,
.search input, #search,
.form-field input, .form-field select, .form-field textarea {
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
color: var(--ink);
}
input:focus, select:focus, textarea:focus {
border-color: var(--apple-blue) !important;
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15) !important;
}
/* === 搜索框背景 === */
.search {
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
}
.search:focus-within {
border-color: var(--apple-blue);
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}
/* === 抽屉 === */
.drawer {
background: var(--bg-elevated);
}
.drawer-backdrop {
background: rgba(0, 0, 0, 0.32);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.drawer-close {
background: rgba(120, 120, 128, 0.12);
}
.drawer-close:hover {
background: rgba(120, 120, 128, 0.20);
}
/* === modals === */
.modal-backdrop {
background: rgba(0, 0, 0, 0.36);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* === po-item === */
.po-item {
background: var(--bg-sunken);
border: 1px solid transparent;
}
.po-item:hover {
background: var(--bg-elevated);
border-color: var(--line-strong);
box-shadow: var(--shadow-xs);
}
/* === 按 fit comment 的 hint === */
.snooze-hint {
background: #FFF8DB;
border: 1px solid rgba(255, 204, 0, 0.30);
color: var(--await-fit);
}
.snooze-hint b { color: #6B4400; }
.snooze-hint button {
background: var(--bg-elevated);
color: var(--await-fit);
border: 1px solid rgba(255, 204, 0, 0.40);
}
/* === follow-up-hint === */
.follow-up-hint {
background: var(--bg-sunken);
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px 16px;
}
.follow-up-hint .lbl {
color: var(--ink-mute);
}
.follow-up-hint.lvl-danger {
background: rgba(255, 59, 48, 0.06);
border-color: rgba(255, 59, 48, 0.15);
}
.follow-up-hint.lvl-warn {
background: rgba(255, 149, 0, 0.08);
border-color: rgba(255, 149, 0, 0.18);
}
/* === stage-bar 进度圆点更精致 === */
.stage-dot.done {
background: var(--ok);
}
.stage-dot.current {
background: var(--apple-blue);
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.18);
}
/* === EX 日期筛选 === */
.ef-date-filter {
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
}
.ef-date-filter.active {
background: var(--ink) !important;
border-color: var(--ink) !important;
}
/* === 滚动条更精细 === */
::-webkit-scrollbar {
width: 6px; height: 6px;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.12);
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.22);
}
/* === 列表头部 === */
.list-header.simplified, .production-list-header {
background: transparent !important;
color: var(--ink-mute);
}
/* === 抽屉头部 === */
.drawer-title h2 {
color: var(--ink);
letter-spacing: -0.022em;
}
.drawer-title .sku {
color: var(--ink-mute);
}
/* 修复一些颜色变量引用残留（确保 CSS variable 一致） */
.dot-ok { color: var(--ok); }
.dot-warn { color: var(--warn); }
.dot-danger { color: var(--danger); }
/* === 新看板：月份-日期-PO 三层折叠 === */
.month-board {
display: flex;
flex-direction: column;
gap: 16px;
}
.month-section {
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.month-section.collapsed .month-content,
.special-section.collapsed .month-content {
display: none;
}
.month-header {
padding: 16px 20px;
display: flex; align-items: center; justify-content: space-between;
cursor: pointer;
user-select: none;
background: rgba(245, 245, 247, 0.5);
border-bottom: 1px solid var(--line);
transition: background 0.15s;
}
.month-section.collapsed .month-header,
.special-section.collapsed .month-header {
border-bottom: none;
}
.month-header:hover {
background: rgba(235, 235, 239, 0.6);
}
.month-header-left {
display: flex; align-items: baseline; gap: 14px;
}
.month-title {
font-family: var(--font-serif); font-style: italic;
font-size: 24px; font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
}
.month-meta {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.month-chevron {
color: var(--ink-mute);
transition: transform 0.2s;
font-size: 14px;
}
.month-section.collapsed .month-chevron,
.special-section.collapsed .month-chevron {
transform: rotate(-90deg);
}
.month-content {
padding: 16px 20px;
}
/* 月内的日期方块 - 横向排列，可换行 */
.date-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 10px;
}
.date-card {
background: var(--bg-sunken);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 14px;
cursor: pointer;
user-select: none;
display: flex; flex-direction: column; gap: 4px;
position: relative;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.date-card:hover {
background: var(--bg-elevated);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
border-color: var(--line-strong);
}
.date-card.expanded {
background: var(--bg-elevated);
border-color: var(--apple-blue);
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}
.date-card-day {
font-family: var(--font-serif); font-style: italic;
font-size: 22px; font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
}
.date-card-info {
display: flex; align-items: center; justify-content: space-between;
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute);
}
.date-card-info .countdown {
letter-spacing: 0.02em;
}
.date-card-info .po-count {
background: rgba(120, 120, 128, 0.12);
padding: 2px 7px;
border-radius: 8px;
font-weight: 600;
}
.date-card.expanded .po-count {
background: var(--apple-blue);
color: white;
}
/* 紧迫度边色 */
.date-card.urg-overdue { border-left: 3px solid var(--danger); background: var(--danger-bg); }
.date-card.urg-overdue .date-card-day { color: var(--danger); }
.date-card.urg-danger { border-left: 3px solid var(--danger); }
.date-card.urg-danger .date-card-day { color: var(--danger); }
.date-card.urg-warn { border-left: 3px solid var(--warn); }
.date-card.urg-warn .date-card-day { color: var(--warn); }
.date-card.urg-ok { border-left: 3px solid var(--ok); }
/* 日期 PO 详情区（紧凑表格） */
.date-po-detail {
display: none;
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed var(--line);
animation: detailSlideDown 0.22s ease-out;
}
.date-card.expanded + .date-po-detail,
.date-card.expanded .date-po-detail {
display: block;
}
@keyframes detailSlideDown {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* 详情区是 grid 横跨整个月 row */
.date-detail-row {
grid-column: 1 / -1;
background: var(--bg-elevated);
border: 1px solid var(--apple-blue);
border-radius: 10px;
padding: 14px 16px;
margin-top: 8px;
animation: detailSlideDown 0.22s ease-out;
}
.date-detail-row-header {
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.date-detail-row-title {
font-family: var(--font-serif); font-style: italic;
font-size: 18px; font-weight: 400;
color: var(--ink);
}
.date-detail-row-meta {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute);
margin-left: auto;
}
.date-detail-close-btn {
background: rgba(120, 120, 128, 0.12);
border: none;
border-radius: 6px;
width: 26px; height: 26px;
cursor: pointer;
color: var(--ink-soft);
display: flex; align-items: center; justify-content: center;
}
.date-detail-close-btn:hover {
background: rgba(120, 120, 128, 0.20);
color: var(--ink);
}
/* 紧凑 PO 表格 */
.compact-po-table {
display: flex; flex-direction: column;
gap: 1px;
background: var(--line);
border-radius: 8px;
overflow: hidden;
}
.compact-po-row {
display: grid;
grid-template-columns: 36px 90px 64px 1fr 130px 80px 100px 24px;
gap: 10px;
padding: 8px 12px;
background: var(--bg-elevated);
align-items: center;
cursor: pointer;
transition: background 0.12s;
font-size: 12px;
}
.compact-po-row:hover {
background: var(--bg-sunken);
}
.compact-po-row .thumb-tiny {
width: 32px; height: 40px;
border-radius: 4px; object-fit: cover;
background: var(--bg-sunken);
}
.compact-po-row .thumb-tiny-placeholder {
width: 32px; height: 40px;
border-radius: 4px;
background: var(--bg-sunken); border: 1px dashed var(--line-strong);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 8px; color: var(--ink-mute);
letter-spacing: 0.05em;
}
.compact-po-row .compact-sku {
font-family: var(--font-mono); font-size: 11.5px;
font-weight: 600; color: var(--ink);
}
.compact-po-row .compact-name {
font-size: 12px; color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.compact-po-row .compact-po-num {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-soft);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.compact-po-row .compact-po-color {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-soft);
}
.compact-po-row .compact-node {
font-size: 11px; color: var(--ink-soft);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.compact-po-row .compact-node.danger { color: var(--danger); font-weight: 600; }
.compact-po-row .compact-node.warn { color: var(--warn); font-weight: 600; }
.compact-po-row .compact-arrow {
color: var(--ink-mute); text-align: right;
}
/* 已过货期 / 已批船版 单独区域 */
.special-section {
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.special-section .month-header {
background: var(--bg-sunken);
}
.special-section.overdue .month-header {
background: rgba(255, 59, 48, 0.08);
}
.special-section.overdue .month-title {
color: var(--danger);
font-style: normal; font-family: var(--font-sans);
font-size: 16px; font-weight: 600;
}
.special-section.done .month-title {
color: var(--ok-soft);
font-style: normal; font-family: var(--font-sans);
font-size: 16px; font-weight: 600;
}
@media (max-width: 1100px) {
.compact-po-row {
grid-template-columns: 32px 80px 56px 1fr 110px 80px 24px;
}
.compact-po-row .compact-node { display: none; }
}
/* === 搜索框：去掉外层边框，只保留内层椭圆 === */
.search {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
.search:focus-within {
border: none !important;
box-shadow: none !important;
}
.search input, #search {
width: 100%;
background: var(--bg-elevated) !important;
border: 1px solid var(--line-strong) !important;
border-radius: 10px !important;
padding: 8px 38px 8px 36px !important;
font-size: 13px;
color: var(--ink);
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}
.search input:focus, #search:focus {
border-color: var(--apple-blue) !important;
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15) !important;
outline: none !important;
}
.search svg {
z-index: 1;
pointer-events: none;
}
.search-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: 50% !important;
background: var(--bg-sunken, #f2f2f7);
color: var(--ink-mute, #6e6e73);
font-size: 16px;
line-height: 24px;
cursor: pointer;
}
.search-clear:hover { background: var(--line, #e5e5ea); color: var(--ink, #1d1d1f); }
/* === 通用折叠样式 === */
.collapsible-header {
cursor: pointer;
user-select: none;
display: flex !important;
align-items: center;
gap: 10px;
transition: opacity 0.15s;
}
.collapsible-header:hover {
opacity: 0.85;
}
.section-chevron {
font-size: 11px;
color: var(--ink-mute);
transition: transform 0.2s ease;
flex-shrink: 0;
width: 14px;
text-align: center;
}
.collapsed .section-chevron {
transform: rotate(-90deg);
}
.collapsed .section-content {
display: none;
}
/* today section 折叠 */
.today-section.collapsed .section-sub {
display: none;
}
.today-section h2.collapsible-header {
margin-bottom: 4px;
}
/* archive section 折叠 */
.archive-section h2.collapsible-header {
margin-bottom: 12px;
}
/* === 开发追踪按阶段分组 === */
.dev-list-grouped {
display: flex;
flex-direction: column;
gap: 18px;
}
.dev-stage-section {
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.dev-stage-header {
padding: 12px 18px;
background: rgba(245, 245, 247, 0.6);
border-bottom: 1px solid var(--line);
}
.dev-stage-section.collapsed .dev-stage-header {
border-bottom: none;
}
.dev-stage-header .stage-tag {
font-size: 12px !important;
padding: 4px 12px !important;
font-weight: 600;
}
.dev-stage-count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.04em;
margin-left: auto;
}
.dev-stage-section .style-list {
border: none !important;
border-radius: 0 !important;
background: transparent;
}
/* === 开发追踪：月份分组（顶层）+ 组别子分桶（二层） === */
.dev-month-section {
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.dev-month-header {
padding: 14px 20px;
background: linear-gradient(to bottom, rgba(245, 245, 247, 0.85), rgba(245, 245, 247, 0.45));
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.dev-month-section.collapsed .dev-month-header {
border-bottom: none;
}
.dev-month-label {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
}
.dev-month-count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.dev-month-summary {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-left: auto;
align-items: center;
}
.month-summary-pill {
display: inline-flex;
align-items: center;
padding: 3px 9px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.03em;
border-radius: 10px;
white-space: nowrap;
}
.group-other-pill {
background: var(--bg-sunken);
color: var(--ink-soft);
border: 1px solid var(--line-strong);
}
/* 组别子分桶 */
.dev-group-subsection {
border-top: 1px solid var(--line);
}
.dev-group-subsection:first-child {
border-top: none;
}
.dev-group-header {
padding: 10px 20px;
background: rgba(243, 242, 236, 0.5);
display: flex;
align-items: center;
gap: 10px;
}
.dev-group-subsection.collapsed .dev-group-header {
background: rgba(243, 242, 236, 0.3);
}
.dev-group-header .group-badge {
font-size: 10.5px;
padding: 3px 10px;
}
.dev-group-count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.dev-month-section .style-list {
border: none !important;
border-radius: 0 !important;
background: transparent;
}
/* date-group 折叠时去掉头部底边 */
.production-group.collapsed .production-group-header {
border-bottom: none;
border-radius: 12px !important;
}
.production-group .production-group-header.collapsible-header {
cursor: pointer;
}
/* ============================================================
修复信息截断 + 按钮样式打磨
============================================================ */
/* === 紧凑表格行：调整列宽，让节点信息有空间 === */
.compact-po-row {
grid-template-columns: 36px 80px 56px minmax(120px, 1fr) 110px 90px minmax(140px, 180px) 18px !important;
gap: 8px !important;
}
.compact-po-row .compact-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.compact-po-row .compact-node {
white-space: nowrap;
overflow: visible; /* 不截断节点信息 */
text-overflow: clip;
font-size: 11px;
text-align: right;
}
@media (max-width: 1200px) {
.compact-po-row {
grid-template-columns: 32px 80px 56px minmax(100px, 1fr) 100px 80px minmax(120px, 160px) 18px !important;
}
.compact-po-row .compact-name {
font-size: 11.5px;
}
}
@media (max-width: 1100px) {
.compact-po-row {
grid-template-columns: 32px 70px 50px 1fr 90px 70px minmax(110px, 140px) 18px !important;
}
.compact-po-row .compact-po-num,
.compact-po-row .compact-po-color {
font-size: 10.5px;
}
}
/* === "+ 加 PO" 按钮：苹果风胶囊小钮 === */
.po-add-btn {
background: var(--bg-elevated) !important;
color: var(--apple-blue) !important;
border: 1px solid var(--line-strong) !important;
border-radius: 8px !important;
padding: 4px 12px !important;
font-family: var(--font-sans) !important;
font-size: 12px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: background-color 0.15s !important, border-color 0.15s !important, color 0.15s !important, transform 0.15s !important, opacity 0.15s !important, box-shadow 0.15s !important;
letter-spacing: -0.005em !important;
}
.po-add-btn:hover {
background: var(--apple-blue-bg) !important;
border-color: var(--apple-blue) !important;
transform: translateY(-1px) !important;
}
/* === PO 卡片头部更精致 === */
.po-card {
border-radius: 12px !important;
background: var(--bg-elevated) !important;
border: 1px solid var(--line) !important;
padding: 14px 16px !important;
box-shadow: var(--shadow-xs);
}
.po-card-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.po-card-header .lbl-section {
font-family: var(--font-sans) !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--ink) !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
}
.po-context-count {
margin-left: 10px;
margin-right: auto;
font-size: 11px;
color: var(--ink-mute);
background: var(--bg-sunken);
border: 1px solid var(--line);
border-radius: 999px;
padding: 2px 8px;
white-space: nowrap;
}
.po-card-footer {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between;
}
/* ============================================================
PO 列表 v2 — Lane C 主行+点击展开详情(苹果 Reminders/Mail 风格)
- 每个 PO 默认一行 (40px),清晰扫读
- 点击主行展开/收起额外详情(大货款号/条形号/延期历史/描述)
- 过期款用整行浅红背景 + chip 替代 border-left
============================================================ */
.po-list-v2 {
display: flex; flex-direction: column;
border-radius: 8px; overflow: hidden;
background: var(--bg-elevated);
border: 1px solid var(--line);
}
.po-row {
border-bottom: 1px solid var(--line);
}
.po-row:last-child { border-bottom: none; }
.po-row-current {
background: rgba(0, 122, 255, 0.06);
box-shadow: inset 3px 0 0 var(--apple-blue);
}
.po-row-overdue { background: var(--danger-bg); }
.po-row-overdue:not(.po-row-expanded):hover { background: rgba(215, 0, 21, 0.10); }
.po-row:not(.po-row-overdue):hover { background: var(--bg-hover); }
.po-row-main {
display: flex; align-items: center; gap: 8px;
width: 100%;
padding: 11px 14px;
border: none; background: transparent;
font: inherit; color: inherit;
cursor: pointer; text-align: left;
}
.po-row-main:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--apple-blue);
border-radius: 6px;
}
.po-row-main[data-no-toggle="1"] { cursor: default; }
.po-row-main[data-no-toggle="1"] .po-row-chevron { visibility: hidden; }
.po-row-chevron {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px;
color: var(--ink-mute);
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.po-row-expanded .po-row-chevron { transform: rotate(90deg); }
.po-row-num {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.01em;
}
.po-row-dot { color: var(--line-strong); }
.po-row-color {
font-size: 13px;
color: var(--ink);
font-weight: 500;
}
.po-row-qty {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-soft);
padding: 1px 7px;
background: var(--bg-sunken);
border-radius: 4px;
}
.po-row-spacer { flex: 1; }
.po-row-ef {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-soft);
}
.po-row-overdue .po-row-ef { color: var(--danger); }
.po-status-chip {
display: inline-flex; align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
}
.po-chip-danger {
background: var(--danger);
color: #fff;
}
.po-chip-warn {
background: var(--warn-bg);
color: var(--warn);
}
.po-chip-ok {
background: var(--ok-bg);
color: var(--ok);
}
/* === 展开后的详情区 === */
.po-row-details {
padding: 4px 14px 14px 36px; /* 左对齐主行内容(chevron 14 + gap 8 + 一点空隙) */
display: flex; flex-direction: column; gap: 8px;
font-size: 12.5px;
}
.po-detail-line {
display: flex; align-items: baseline; gap: 12px;
}
.po-detail-line-desc { align-items: flex-start; }
.po-detail-line-history { flex-direction: column; gap: 6px; }
.po-detail-lbl {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-mute);
min-width: 60px;
flex-shrink: 0;
padding-top: 1px;
}
.po-detail-val {
font-family: var(--font-sans);
color: var(--ink);
font-size: 12.5px;
}
.po-detail-val-mute {
font-family: var(--font-mono);
color: var(--ink-soft);
}
.po-delay-list {
display: flex; flex-direction: column; gap: 4px;
padding-left: 0;
}
.po-delay-row {
display: flex; align-items: center; gap: 10px;
padding: 6px 10px;
background: var(--bg-sunken);
border-radius: 6px;
font-size: 12px;
}
.po-delay-dates {
font-family: var(--font-mono);
color: var(--ink);
font-weight: 500;
}
.po-delay-reason { color: var(--ink-soft); }
.po-delay-note { color: var(--ink-mute); font-style: italic; }
.po-row-actions {
margin-top: 4px;
display: flex; gap: 8px;
}
.po-row-actions .po-extend-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: var(--bg-elevated);
border: 1px solid var(--danger);
border-radius: 6px;
color: var(--danger);
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.po-row-actions .po-extend-btn:hover {
background: var(--danger);
color: #fff;
}
/* === Legacy PO 列表项(其他地方还在用,保留)=== */
.po-item {
background: var(--bg-sunken) !important;
border: 1px solid transparent !important;
border-radius: 8px !important;
padding: 10px 14px !important;
margin-bottom: 6px !important;
cursor: pointer;
transition: background-color 0.15s !important, border-color 0.15s !important, color 0.15s !important, transform 0.15s !important, opacity 0.15s !important, box-shadow 0.15s !important;
}
.po-item:hover {
background: var(--bg-elevated) !important;
border-color: var(--line-strong) !important;
box-shadow: var(--shadow-xs) !important;
}
.po-item-main {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 4px;
}
.po-item-num {
font-family: var(--font-mono); font-size: 12px;
font-weight: 600; color: var(--ink);
}
.po-item-color {
background: var(--bg-elevated);
padding: 2px 8px; border-radius: 6px;
font-size: 11px; color: var(--ink-soft);
border: 1px solid var(--line);
}
.po-item-qty {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-mute);
}
.po-item-ef {
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-soft);
}
/* === 上传图片按钮 === */
.image-change-mini-btn {
background: var(--bg-sunken) !important;
border: 1px solid var(--line-strong) !important;
color: var(--ink-soft) !important;
font-family: var(--font-sans) !important;
font-size: 11.5px !important;
font-weight: 500 !important;
padding: 5px 12px !important;
border-radius: 8px !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
}
.image-change-mini-btn:hover {
background: var(--bg-elevated) !important;
border-color: var(--apple-blue) !important;
color: var(--apple-blue) !important;
}
/* === 图3 列表行：节点信息列加宽；仅长品牌单行加宽客户列 === */
.style-row.simplified,
.list-header.simplified {
grid-template-columns: 60px 100px 70px minmax(140px, 1fr) minmax(220px, 280px) 28px !important;
gap: 12px !important;
}
.style-row.simplified:has(> .client-badge.client-badge-mid) {
grid-template-columns: 60px 100px 116px minmax(140px, 1fr) minmax(220px, 280px) 28px !important;
}
.style-row.simplified:has(> .client-badge.client-badge-long) {
grid-template-columns: 60px 100px 156px minmax(140px, 1fr) minmax(220px, 280px) 28px !important;
}
.style-row.simplified > .client-badge {
max-width: 100% !important;
}
.style-row.simplified > .client-badge.client-badge-mid {
width: max-content !important;
max-width: 136px !important;
}
.style-row.simplified > .client-badge.client-badge-long {
width: max-content !important;
max-width: 176px !important;
}
.production-row.with-node,
.production-list-header.with-node {
/* 6 列简表:checkbox | 图 | PO主+副 | 客户·组·工厂 | 颜色·数量 | EX货期+大货进度 | → */
grid-template-columns: 28px 40px minmax(140px, 1fr) 130px 130px 150px 20px !important;
gap: 12px !important;
}
/* 大货行的缩略图:小于全局 thumb(56×72),对齐 mock 36×46 */
.production-row.with-node > .thumb,
.production-row.with-node > .thumb-placeholder {
width: 36px !important; height: 46px !important;
border-radius: 4px !important;
}
.production-current-node .node-name {
white-space: nowrap;
}
@media (max-width: 1200px) {
.style-row.simplified,
.list-header.simplified {
grid-template-columns: 50px 90px 60px 1fr minmax(200px, 240px) 24px !important;
}
.style-row.simplified:has(> .client-badge.client-badge-mid),
.style-row.simplified:has(> .client-badge.client-badge-long) {
grid-template-columns: 50px 90px 112px 1fr minmax(200px, 240px) 24px !important;
}
.style-row.simplified > .client-badge {
max-width: 100% !important;
}
.style-row.simplified > .client-badge.client-badge-mid,
.style-row.simplified > .client-badge.client-badge-long {
max-width: 128px !important;
}
.production-row.with-node,
.production-list-header.with-node {
/* 窄屏:略压缩 */
grid-template-columns: 24px 36px minmax(120px, 1fr) 118px 118px 140px 18px !important;
}
}
/* 开发列表专用：品牌和信息标签贴近排列，避免 WAREHOUSE 等长品牌撑开空白 */
.style-row.simplified.dev-list-row,
.list-header.simplified.dev-list-header {
grid-template-columns: 60px 180px minmax(360px, 1fr) minmax(220px, 280px) 28px !important;
gap: 12px !important;
}
.style-row.simplified.dev-list-row:has(> .client-badge.client-badge-mid),
.style-row.simplified.dev-list-row:has(> .client-badge.client-badge-long) {
grid-template-columns: 60px 180px minmax(360px, 1fr) minmax(220px, 280px) 28px !important;
}
.style-row.simplified.dev-list-row > .thumb,
.style-row.simplified.dev-list-row > .thumb-placeholder {
grid-column: 1 !important;
}
.style-row.simplified.dev-list-row > .sku {
grid-column: 2 !important;
}
.style-row.simplified.dev-list-row > .style-row-brand-info {
grid-column: 3 !important;
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
}
.style-row.simplified.dev-list-row > .style-row-brand-info .client-badge {
flex: 0 0 auto;
max-width: min(180px, 38vw) !important;
}
.style-row.simplified.dev-list-row > .style-row-brand-info .style-row-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.style-row.simplified.dev-list-row > .style-row-brand-info .style-name,
.style-row.simplified.dev-list-row > .style-row-brand-info .style-subinfo {
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.style-row.simplified.dev-list-row > .style-row-brand-info .style-name {
gap: 6px;
}
.style-row.simplified.dev-list-row > .style-row-brand-info .style-subinfo {
gap: 8px;
}
.style-row.simplified.dev-list-row > .node-block {
grid-column: 4 !important;
}
.style-row.simplified.dev-list-row > .arrow {
grid-column: 5 !important;
}
@media (max-width: 1200px) {
.style-row.simplified.dev-list-row,
.list-header.simplified.dev-list-header {
grid-template-columns: 50px 150px minmax(260px, 1fr) minmax(200px, 240px) 24px !important;
gap: 10px !important;
}
.style-row.simplified.dev-list-row:has(> .client-badge.client-badge-mid),
.style-row.simplified.dev-list-row:has(> .client-badge.client-badge-long) {
grid-template-columns: 50px 150px minmax(260px, 1fr) minmax(200px, 240px) 24px !important;
}
.style-row.simplified.dev-list-row > .style-row-brand-info {
gap: 10px;
}
.style-row.simplified.dev-list-row > .style-row-brand-info .client-badge {
max-width: min(150px, 34vw) !important;
}
}
/* node-block 不截断，超长就缩小字号 */
.node-block-row1 .node-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.node-block-row2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* "+ 加 PO" 按钮在 PO 信息卡片里更突出但不刺眼 */
.po-card-header > button.po-add-btn {
flex-shrink: 0;
}
/* ============================================================
修「我已催过」按钮 + 大货列表日期头重新设计
============================================================ */
/* === 抽屉里的所有按钮（包括"我已催过"）变苹果风 === */
.drawer-actions button {
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
border-radius: 8px;
padding: 8px 14px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
letter-spacing: -0.005em;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.drawer-actions button:hover {
background: var(--bg-sunken);
border-color: var(--ink);
transform: translateY(-1px);
box-shadow: var(--shadow-xs);
}
.drawer-actions button.primary {
background: var(--apple-blue);
border-color: var(--apple-blue);
color: white;
box-shadow: 0 2px 6px rgba(0, 122, 255, 0.18);
}
.drawer-actions button.primary:hover {
background: var(--apple-blue-hover);
border-color: var(--apple-blue-hover);
box-shadow: 0 4px 10px rgba(0, 122, 255, 0.25);
}
.drawer-actions button.danger {
background: rgba(255, 59, 48, 0.10);
border-color: rgba(255, 59, 48, 0.20);
color: var(--danger);
}
.drawer-actions button.danger:hover {
background: rgba(255, 59, 48, 0.16);
border-color: rgba(255, 59, 48, 0.30);
}
/* === 大货跟进列表：日期头改成左侧粘性标签 + 行直接接 === */
.production-group.date-group {
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 14px;
overflow: hidden;
box-shadow: var(--shadow-xs);
}
/* 日期头：现在是横条 + 内嵌左侧标签 */
.production-group.date-group .production-group-header {
background: var(--bg-elevated) !important;
padding: 14px 18px !important;
border: none !important;
border-bottom: 1px solid var(--line) !important;
border-radius: 12px 12px 0 0 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
cursor: pointer;
}
.production-group.date-group.collapsed .production-group-header {
border-bottom: none !important;
border-radius: 12px !important;
}
/* 日期"票根"小标签 */
.production-group.date-group .production-group-header .date-main {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 8px;
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
font-weight: 400;
letter-spacing: -0.01em;
background: var(--bg-sunken);
color: var(--ink);
border: 1px solid var(--line);
}
/* 不同紧迫度的日期标签着色 — 逾期整 box 红色突出 */
.production-group.date-group.date-pending-qc {
border: 1px solid rgba(178, 84, 0, 0.28);
border-radius: 10px;
overflow: hidden;
margin-bottom: 16px;
}
.production-group.date-group.date-pending-qc .production-group-header {
background: var(--warn-bg) !important;
border-bottom: 1px solid rgba(178, 84, 0, 0.24);
}
.production-group.date-group.date-pending-qc .date-main {
background: var(--bg-elevated) !important;
color: var(--warn) !important;
border-color: rgba(178, 84, 0, 0.24) !important;
font-style: normal;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 650;
}
.production-group.date-group.date-overdue {
border: 1px solid var(--danger);
border-radius: 10px;
overflow: hidden;
margin-bottom: 16px;
}
.production-group.date-group.date-overdue .production-group-header {
background: var(--danger-bg) !important;
border-bottom: 1px solid var(--danger);
}
.production-group.date-group.date-overdue .date-main {
background: var(--danger) !important;
color: white !important;
border-color: var(--danger) !important;
font-style: normal;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
}
.production-group.date-group.date-danger .production-group-header {
background: rgba(255, 59, 48, 0.04) !important;
}
.production-group.date-group.date-danger .date-main {
background: var(--danger-bg) !important;
color: var(--danger) !important;
border-color: rgba(255, 59, 48, 0.20) !important;
}
.production-group.date-group.date-warn .production-group-header {
background: rgba(255, 149, 0, 0.04) !important;
}
.production-group.date-group.date-warn .date-main {
background: var(--warn-bg) !important;
color: var(--warn) !important;
border-color: rgba(178, 84, 0, 0.20) !important;
}
.production-group.date-group.date-ok .production-group-header {
background: rgba(52, 199, 89, 0.04) !important;
}
.production-group.date-group.date-ok .date-main {
background: var(--ok-bg) !important;
color: var(--ok-soft) !important;
border-color: rgba(36, 138, 61, 0.20) !important;
}
.production-group.date-group.date-done .production-group-header {
background: var(--bg-sunken) !important;
}
.production-group.date-group.date-done .date-main {
background: var(--bg-elevated) !important;
color: var(--ok-soft) !important;
border-color: var(--line-strong) !important;
font-style: normal;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
}
/* 日期组的 count - 改成右侧元数据 */
.production-group.date-group .production-group-header .count {
margin-left: auto !important;
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-mute);
background: transparent !important;
padding: 0 !important;
border: none !important;
font-weight: 500;
letter-spacing: 0.04em;
}
/* 内容区直接接表格行（去掉额外缩进） */
.production-group.date-group .production-list {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
}
/* 表格 header 行更轻 */
.production-group.date-group .production-list-header {
padding: 10px 14px !important;
background: var(--bg-sunken) !important;
border-bottom: 1px solid var(--line) !important;
}
/* 表格行更轻盈 */
.production-group.date-group .production-row {
padding: 12px 14px !important;
}
/* === collapsed 状态下显示一个简短摘要 === */
/* === 表单可选字段标签 === */
.optional-tag {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--ink-mute);
background: var(--bg-sunken);
border-radius: 4px;
vertical-align: middle;
text-transform: uppercase;
}
/* 新增款式 modal:一体化的批量上传区(dropzone 同时也是画廊容器) */
.image-dropzone.new-photo-zone.has-photos {
/* 有图状态:取消居中,改成左对齐 wrap 网格;padding 收紧;边框变实线弱化 */
display: block;
padding: 12px;
min-height: auto;
text-align: left;
border-style: solid;
border-color: var(--line-strong);
background: var(--bg-elevated);
}
.image-dropzone.new-photo-zone.has-photos:hover {
border-color: var(--ink);
background: var(--bg-elevated);
}
.image-dropzone.new-photo-zone.has-photos.drag-over {
border-color: var(--apple-blue);
background: var(--apple-blue-bg);
}
.new-photo-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-start;
}
.new-photo-grid .thumb {
position: relative;
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--line-strong);
background: var(--bg-sunken);
flex-shrink: 0;
cursor: grab;
transition: transform 0.12s, box-shadow 0.12s;
}
.new-photo-grid .thumb:active { cursor: grabbing; }
.new-photo-grid .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.new-photo-grid .thumb.is-main {
border: 2px solid var(--apple-blue);
}
.new-photo-grid .thumb.drag-over {
transform: scale(1.06);
box-shadow: 0 4px 12px rgba(0, 122, 255, 0.35);
}
.new-photo-grid .thumb .badge-main {
position: absolute;
top: 3px;
left: 3px;
background: var(--apple-blue);
color: white;
font-size: 11px;
font-weight: 700;
padding: 2px 6px;
border-radius: 3px;
letter-spacing: 0.3px;
}
.new-photo-grid .thumb .badge-idx {
position: absolute;
top: 3px;
left: 3px;
background: rgba(0,0,0,0.55);
color: white;
font-size: 11px;
font-weight: 600;
padding: 1px 6px;
border-radius: 3px;
min-width: 14px;
text-align: center;
}
.new-photo-grid .thumb .del-btn {
position: absolute;
top: 3px;
right: 3px;
background: rgba(0,0,0,0.65);
color: white;
border: none;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 14px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
opacity: 0;
transition: opacity 0.15s;
}
.new-photo-grid .thumb:hover .del-btn { opacity: 1; }
.new-photo-grid .thumb .del-btn:hover { background: var(--danger); }
/* 末尾的"+ 加图"卡片 */
.new-photo-grid .add-tile {
width: 80px;
height: 80px;
border-radius: 8px;
border: 1.5px dashed var(--line-strong);
background: var(--bg-sunken);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--ink-mute);
transition: border-color 0.15s, color 0.15s, background 0.15s;
flex-shrink: 0;
user-select: none;
padding: 0;
font-family: inherit;
}
.new-photo-grid .add-tile:hover {
border-color: var(--apple-blue);
color: var(--apple-blue);
background: var(--apple-blue-bg);
}
.new-photo-grid .add-tile .plus {
font-size: 22px;
line-height: 1;
font-weight: 300;
margin-bottom: 2px;
}
.new-photo-grid .add-tile .lbl {
font-size: 11px;
letter-spacing: 0.3px;
}
.new-image-hint {
font-size: 11px;
color: var(--ink-soft);
margin-top: 8px;
letter-spacing: 0.2px;
}
/* 外发打版勾选框（新增款式表单里）*/
label.outsourced-toggle {
display: flex !important;
align-items: center;
gap: 10px;
cursor: pointer;
height: 36px;
padding: 0 12px;
border: 1px solid var(--line-strong);
border-radius: 6px;
background: var(--bg);
user-select: none;
box-sizing: border-box;
margin: 0;
font-weight: normal;
text-transform: none;
letter-spacing: normal;
color: var(--ink);
}
label.outsourced-toggle input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
flex-shrink: 0;
cursor: pointer;
accent-color: var(--ink);
}
label.outsourced-toggle span {
font-size: 13px;
color: var(--ink);
white-space: nowrap;
flex: 1;
font-family: var(--font-sans);
}
label.outsourced-toggle:hover {
border-color: var(--ink);
}
label.outsourced-toggle:has(input:checked) {
background: var(--bg-elevated);
border-color: var(--ink);
}
/* === "+ 新增 PO" 按钮（图里那种孤立的按钮）改成苹果风胶囊 === */
.add-po-cta {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
margin-bottom: 16px;
background: var(--bg-sunken);
border: 1px solid var(--line);
border-radius: 12px;
font-size: 13px;
color: var(--ink-soft);
}
.add-po-cta button {
margin-left: auto;
background: var(--apple-blue) !important;
color: white !important;
border: none !important;
border-radius: 8px !important;
padding: 6px 14px !important;
font-family: var(--font-sans) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
cursor: pointer !important;
letter-spacing: -0.005em !important;
box-shadow: 0 2px 6px rgba(0, 122, 255, 0.18);
transition: background-color 0.15s !important, border-color 0.15s !important, color 0.15s !important, transform 0.15s !important, opacity 0.15s !important, box-shadow 0.15s !important;
text-transform: none !important;
}
.add-po-cta button:hover {
background: var(--apple-blue-hover) !important;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 122, 255, 0.25);
}
/* select 跟单员下拉的样式 */
#f-owner {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px !important;
appearance: none;
-webkit-appearance: none;
}
/* === 抽屉标题旁的"编辑"小按钮 === */
.edit-info-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
margin-left: 6px;
padding: 0;
background: transparent;
border: 1px solid var(--line-strong);
border-radius: 6px;
font-size: 11px;
color: var(--ink-mute);
cursor: pointer;
vertical-align: middle;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.edit-info-btn:hover {
background: var(--apple-blue-bg);
border-color: var(--apple-blue);
color: var(--apple-blue);
transform: scale(1.05);
}
/* ============================================================
月历视图 (Calendar View) — 苹果风
============================================================ */
.calendar-view {
display: flex;
flex-direction: column;
gap: 0;
}
/* 顶部工具栏 */
.calendar-toolbar {
display: flex;
align-items: center;
gap: 24px;
padding: 6px 4px 18px;
}
.calendar-nav {
display: flex;
align-items: center;
gap: 4px;
}
.cal-nav-btn {
width: 32px;
height: 32px;
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
border-radius: 8px;
font-size: 16px;
color: var(--ink);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.cal-nav-btn:hover {
background: var(--bg-sunken);
border-color: var(--ink);
}
.cal-today-btn {
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
border-radius: 8px;
padding: 7px 14px;
font-size: 12.5px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
font-family: var(--font-sans);
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.cal-today-btn:hover {
background: var(--apple-blue);
color: white;
border-color: var(--apple-blue);
}
.calendar-title {
font-family: var(--font-serif);
font-style: italic;
font-size: 26px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.015em;
margin: 0;
}
.calendar-stats {
margin-left: auto;
display: flex;
gap: 18px;
}
.stat-item {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.stat-item b {
color: var(--ink);
font-weight: 700;
font-size: 14px;
margin-right: 2px;
}
/* 月历主网格 */
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 14px;
padding: 12px;
box-shadow: var(--shadow-xs);
}
.cal-weekday {
text-align: center;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
color: var(--ink-mute);
letter-spacing: 0.04em;
padding: 6px 0;
text-transform: uppercase;
}
.cal-cell {
min-height: 96px;
padding: 8px;
background: var(--bg);
border-radius: 10px;
border: 1px solid transparent;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 6px;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.cal-cell:hover {
background: var(--bg-elevated);
border-color: var(--line-strong);
transform: translateY(-1px);
box-shadow: var(--shadow-xs);
}
.cal-cell-empty {
background: transparent;
cursor: default;
}
.cal-cell-empty:hover {
background: transparent;
border-color: transparent;
transform: none;
box-shadow: none;
}
.cal-cell-past {
opacity: 0.55;
}
.cal-cell-past .cal-day-num {
color: var(--ink-mute);
}
.cal-cell-today {
background: rgba(0, 122, 255, 0.06);
border-color: var(--apple-blue);
box-shadow: 0 0 0 1px var(--apple-blue);
}
.cal-cell-today .cal-day-num {
background: var(--apple-blue);
color: white;
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
margin: -2px;
}
.cal-cell-selected {
background: var(--bg-elevated);
border-color: var(--ink);
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}
.cal-cell-has-po.cal-cell-overdue {
background: rgba(255, 59, 48, 0.06);
}
.cal-cell-has-po.cal-cell-danger {
background: rgba(255, 59, 48, 0.04);
}
.cal-cell-has-po.cal-cell-warn {
background: rgba(255, 149, 0, 0.04);
}
.cal-cell-has-po.cal-cell-ok {
background: rgba(52, 199, 89, 0.03);
}
.cal-cell-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.cal-day-num {
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.01em;
}
.cal-day-count {
background: var(--ink);
color: white;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 700;
padding: 1px 6px;
border-radius: 8px;
letter-spacing: 0.04em;
}
.cal-cell-overdue .cal-day-count {
background: var(--danger);
}
.cal-cell-danger .cal-day-count {
background: var(--danger);
}
.cal-cell-warn .cal-day-count {
background: var(--warn);
}
.cal-po-list {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
overflow: hidden;
}
.cal-po-chip {
display: flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
border-radius: 4px;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.02em;
background: var(--bg-elevated);
border: 1px solid var(--line);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-left: 2px solid var(--ink);
}
.cal-po-chip.stage-bg-dev { border-left-color: var(--stage-dev); background: var(--stage-dev-bg); color: var(--stage-dev); }
.cal-po-chip.stage-bg-revise { border-left-color: var(--stage-revise); background: var(--stage-revise-bg); color: var(--stage-revise); }
.cal-po-chip.stage-bg-prod { border-left-color: var(--stage-prod); background: var(--stage-prod-bg); color: var(--stage-prod); }
.cal-po-chip.stage-bg-await-fit { border-left-color: var(--await-fit-strong); background: #FFFCEA; color: var(--await-fit); }
.cal-po-chip.stage-bg-done { border-left-color: var(--ok); background: var(--ok-bg); color: var(--ok-soft); }
.cal-po-sku {
font-weight: 700;
}
.cal-po-color {
color: var(--ink-mute);
font-weight: 500;
font-size: 11px;
margin-left: auto;
}
.cal-po-more {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.04em;
padding: 2px 6px;
font-weight: 600;
}
/* 详情面板（选中日期后显示） */
.cal-detail-panel {
margin-top: 16px;
background: var(--bg-elevated);
border: 1px solid var(--apple-blue);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.10);
animation: panelSlideIn 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes panelSlideIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.cal-detail-header {
padding: 16px 20px;
display: flex;
align-items: center;
gap: 16px;
border-bottom: 1px solid var(--line);
background: rgba(0, 122, 255, 0.04);
}
.cal-detail-date {
display: flex;
align-items: baseline;
gap: 10px;
}
.cal-detail-md {
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
}
.cal-detail-wd {
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink-soft);
font-weight: 500;
}
.cal-detail-meta {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--apple-blue);
letter-spacing: 0.04em;
font-weight: 600;
margin-left: auto;
}
.cal-detail-close {
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(120, 120, 128, 0.12);
border: none;
cursor: pointer;
font-size: 18px;
color: var(--ink-soft);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.cal-detail-close:hover {
background: rgba(120, 120, 128, 0.20);
color: var(--ink);
}
.cal-detail-panel .compact-po-table {
border-radius: 0;
background: transparent;
}
/* 移动端适配 */
@media (max-width: 900px) {
.cal-cell {
min-height: 70px;
padding: 5px;
}
.cal-day-num {
font-size: 12px;
}
.cal-po-chip {
font-size: 8px;
padding: 1px 4px;
}
.cal-po-color {
display: none;
}
.calendar-toolbar {
flex-wrap: wrap;
gap: 12px;
}
.calendar-stats {
margin-left: 0;
width: 100%;
}
}
/* ============================================================
完整流程图 + 完整日志 - 苹果风
============================================================ */
/* 折叠区头部更精致 */
.detail-collapse {
background: var(--bg-sunken);
border-radius: 12px;
padding: 0;
margin-top: 16px;
border-top: none !important;
overflow: hidden;
}
.detail-collapse-toggle {
width: 100%;
padding: 14px 18px !important;
background: transparent;
border: none;
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans) !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--ink) !important;
letter-spacing: -0.005em !important;
transition: background 0.15s;
}
.detail-collapse-toggle:hover {
background: rgba(0, 0, 0, 0.03);
}
.detail-collapse-toggle .chevron {
font-size: 11px;
color: var(--ink-mute);
transition: transform 0.2s ease;
}
.detail-collapse.open .chevron {
transform: rotate(90deg);
color: var(--apple-blue);
}
.detail-collapse-content {
padding: 18px 24px 24px !important;
background: var(--bg-elevated);
border-top: 1px solid var(--line);
}
/* 完整流程图 - 节点更柔和 */
.big-flow {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
gap: 0;
padding: 32px 28px;
background: var(--bg-sunken);
border-radius: 12px;
margin-bottom: 16px;
min-width: fit-content;
overflow-x: auto;
}
.big-flow-node {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
min-width: 110px;
position: relative;
}
.big-flow-label-top {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
color: var(--ink-mute);
letter-spacing: -0.005em;
text-align: center;
white-space: normal;
padding: 0 6px;
max-width: 130px;
line-height: 1.35;
}
.big-flow-label-top.done {
color: var(--ok-soft);
}
.big-flow-label-top.current {
color: var(--ink);
font-weight: 700;
}
.big-flow-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--line-strong); position: relative; transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, opacity 0.2s, box-shadow 0.2s; }
.big-flow-dot.done { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.big-flow-dot.done::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: white; font-size: 11px; font-weight: 700; }
.big-flow-dot.current { width: 24px; height: 24px; margin-top: -4px; margin-bottom: -4px; background: var(--apple-blue); border-color: var(--apple-blue); border-width: 3px; box-shadow: 0 0 0 6px rgba(0, 122, 255, 0.18); animation: pulse-current 2s ease-in-out infinite; }
@keyframes pulse-current { 0%, 100% { box-shadow: 0 0 0 6px rgba(0, 122, 255, 0.18); } 50% { box-shadow: 0 0 0 10px rgba(0, 122, 255, 0.10); } }
.big-flow-dot.current.current-danger { width: 24px; height: 24px; margin-top: -4px; margin-bottom: -4px; background: var(--danger); border-color: var(--danger); border-width: 3px; box-shadow: 0 0 0 6px rgba(255, 59, 48, 0.18); animation: pulse-danger 2s ease-in-out infinite; }
@keyframes pulse-danger { 0%, 100% { box-shadow: 0 0 0 6px rgba(255, 59, 48, 0.18); } 50% { box-shadow: 0 0 0 10px rgba(255, 59, 48, 0.10); } }
.big-flow-dot.current.current-warn { width: 24px; height: 24px; margin-top: -4px; margin-bottom: -4px; background: var(--warn); border-color: var(--warn); border-width: 3px; box-shadow: 0 0 0 6px rgba(255, 149, 0, 0.18); }
.big-flow-dot.current.final-approved { width: 24px; height: 24px; margin-top: -4px; margin-bottom: -4px; background: var(--ok); border-color: var(--ok); border-width: 3px; box-shadow: 0 0 0 6px var(--ok-bg); }
.big-flow-date { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); font-weight: 500; letter-spacing: 0.02em; text-align: center; white-space: nowrap; }
.big-flow-date.current-danger {
color: var(--danger);
font-weight: 700;
}
.big-flow-date.current-warn {
color: var(--warn);
font-weight: 700;
}
.big-flow-connector { flex: 1; height: 2.5px; background: var(--line-strong); position: relative; min-width: 56px; margin: 0 12px; align-self: center; margin-bottom: 24px; }
.big-flow-connector.done {
background: var(--ok);
}
.big-flow-connector.dashed {
background: transparent;
border-top: 2px dashed var(--line-strong);
height: 0;
}
.connector-dur { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); background: var(--bg-sunken); padding: 2px 7px; border-radius: 4px; white-space: nowrap; letter-spacing: 0.02em; font-weight: 600; }
/* 完整日志 - 苹果时间轴风 */
.history-log { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.log-entry {
display: grid; grid-template-columns: 90px 1fr 24px;
align-items: center; gap: 14px;
padding: 14px 18px;
background: var(--bg-sunken); border-radius: 10px;
cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
border: 1px solid transparent;
}
.log-entry:hover {
background: var(--bg-elevated);
border-color: var(--line-strong);
transform: translateX(2px);
box-shadow: var(--shadow-xs);
}
.log-entry.active {
background: var(--apple-blue-bg);
border-color: rgba(0, 122, 255, 0.20);
}
.log-entry.outcome-archived {
background: rgba(120, 120, 128, 0.10);
}
.log-entry.outcome-approved {
background: var(--ok-bg);
}
.log-entry.outcome-po {
background: rgba(0, 122, 255, 0.08);
}
.log-entry.outcome-photo {
background: var(--stage-revise-bg);
}
.log-entry.outcome-remake {
background: var(--danger-bg);
}
/* 辅助里程碑事件（版师打完 / 面料备齐）— 淡背景 + 左色条区分角色 */
.log-entry.log-milestone {
background: rgba(120, 120, 128, 0.04);
border-left-width: 2px;
}
.log-entry.log-milestone-pm {
border-left-color: #534AB7;
}
.log-entry.log-milestone-fb {
border-left-color: #BA7517;
}
.log-entry.log-milestone .event-name {
font-weight: 500;
color: var(--ink-soft);
font-size: 12.5px;
}
.log-date {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-soft);
letter-spacing: 0.02em;
}
.log-content {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.log-content .event-name {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.005em;
}
.log-content .event-detail {
font-family: var(--font-sans);
font-size: 11.5px;
color: var(--ink-soft);
font-weight: 400;
line-height: 1.4;
}
.log-edit-icon { font-size: 12px; color: var(--ink-mute); text-align: right; opacity: 0.5; transition: opacity 0.15s; }
.log-entry:hover .log-edit-icon { opacity: 1; color: var(--apple-blue); }
.log-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.log-entry:hover .log-actions { opacity: 1; }
.log-action-btn { width: 26px; height: 26px; border: none; background: transparent; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.12s, opacity 0.12s, box-shadow 0.12s; }
.log-action-edit { color: var(--ink-mute); }
.log-action-edit:hover { background: rgba(0,122,255,0.10); color: var(--apple-blue,#007AFF); }
.log-action-del { color: var(--ink-mute); }
.log-action-del:hover { background: rgba(255,59,48,0.10); color: var(--danger); }
/* meta-grid 改成更精致的卡片 */
.meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 24px 0; }
.meta-item { background: var(--bg-sunken); border-radius: 10px; padding: 16px 18px; }
.meta-item .label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--ink-mute);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 6px;
}
.meta-item .value {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.005em;
}
/* section-title 苹果化 */
.detail-collapse-content .section-title {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.005em;
margin-top: 28px;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
text-transform: none;
}
.detail-collapse-content .section-title:first-child { margin-top: 8px; }
/* ============================================================
真毛玻璃穿透效果
============================================================ */
/* 让侧栏浮在内容之上而不是占用空间 */
.app-shell {
position: relative;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 240px;
z-index: 50;
background: rgba(235, 235, 239, 0.55) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-right: 1px solid rgba(209, 209, 214, 0.4);
}
/* 内容区让出 240px 但是滚动时会从侧栏后面经过 */
.content-area {
margin-left: 240px;
width: calc(100vw - 240px);
transition: margin-left 0.2s ease, width 0.2s ease;
}
/* 侧栏折叠时，content-area 也跟着收到 64px，否则 main 还停在原来位置导致左侧大块空白 */
body.sidebar-collapsed .content-area {
margin-left: 64px;
width: calc(100vw - 64px);
}
/* 顶部控制条也用毛玻璃 */
.controls {
position: sticky;
top: 0;
z-index: 20;
background: rgba(245, 245, 247, 0.65) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 1px solid rgba(229, 229, 234, 0.6);
}
/* 主内容多一些垂直空间，渐变背景增加视觉层次 */
main#main {
background:
linear-gradient(180deg, rgba(245, 245, 247, 0.4) 0%, rgba(242, 242, 244, 0.4) 100%),
radial-gradient(ellipse 80% 50% at 30% 0%, rgba(0, 122, 255, 0.04), transparent),
radial-gradient(ellipse 60% 60% at 90% 100%, rgba(142, 78, 198, 0.03), transparent);
background-attachment: fixed;
min-height: 100vh;
}
/* 移动端：侧栏改成顶部 */
@media (max-width: 900px) {
.sidebar {
width: 64px;
}
.content-area {
margin-left: 64px;
width: calc(100vw - 64px);
}
}
/* ============================================================
自定义日期选择器 - 苹果风
============================================================ */
.date-picker-popup {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
padding: 14px;
width: 280px;
font-family: var(--font-sans);
animation: dpFadeIn 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes dpFadeIn {
from { opacity: 0; transform: translateY(-4px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.dp-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.dp-nav-btn {
width: 28px;
height: 28px;
background: var(--bg-sunken);
border: none;
border-radius: 6px;
font-size: 16px;
color: var(--ink);
cursor: pointer;
font-weight: 600;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
display: flex;
align-items: center;
justify-content: center;
}
.dp-nav-btn:hover {
background: var(--apple-blue);
color: white;
}
.dp-title {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.005em;
}
.dp-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-bottom: 6px;
}
.dp-weekdays > div {
text-align: center;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
color: var(--ink-mute);
padding: 4px 0;
}
.dp-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.dp-cell {
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
border-radius: 8px;
transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.12s, opacity 0.12s, box-shadow 0.12s;
}
.dp-cell:hover {
background: var(--bg-sunken);
}
.dp-cell-other {
color: var(--ink-mute);
opacity: 0.4;
cursor: default;
}
.dp-cell-other:hover {
background: transparent;
}
.dp-cell-today {
color: var(--apple-blue);
font-weight: 700;
}
.dp-cell-today::after {
content: '';
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--apple-blue);
position: absolute;
margin-top: 22px;
}
.dp-cell-selected {
background: var(--apple-blue) !important;
color: white !important;
font-weight: 700;
}
.dp-cell-selected.dp-cell-today::after {
background: white;
}
.dp-footer {
display: flex;
justify-content: space-between;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.dp-clear-btn,
.dp-today-btn {
background: transparent;
border: none;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--apple-blue);
cursor: pointer;
padding: 4px 10px;
border-radius: 6px;
transition: background 0.15s;
}
.dp-clear-btn:hover,
.dp-today-btn:hover {
background: var(--apple-blue-bg);
}
/* 隐藏浏览器原生日历图标和占位符 */
input[type="date"]::-webkit-calendar-picker-indicator {
display: none !important;
-webkit-appearance: none;
appearance: none;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
display: none;
}
input[type="date"] {
/* Firefox */
-moz-appearance: textfield;
cursor: pointer;
caret-color: transparent;
}
/* 让 input 看起来像我们的自定义控件触发器 */
input[type="date"]:hover {
background: var(--bg-sunken) !important;
}
/* ============================================================
月历 + 右侧忙日栏布局
============================================================ */
.calendar-layout {
display: grid;
grid-template-columns: 1fr 280px;
gap: 16px;
align-items: start;
}
@media (max-width: 1200px) {
.calendar-layout {
grid-template-columns: 1fr 240px;
gap: 12px;
}
}
@media (max-width: 1100px) {
.calendar-layout {
grid-template-columns: 1fr;
}
}
/* 右侧忙日栏 */
.busy-days-panel {
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-xs);
position: sticky;
top: 80px; /* 让它跟随滚动 */
max-height: calc(100vh - 120px);
display: flex;
flex-direction: column;
}
.busy-days-header {
padding: 14px 18px 10px;
border-bottom: 1px solid var(--line);
background: var(--bg-sunken);
}
.busy-days-title {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
margin: 0 0 2px 0;
}
.busy-days-sub {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.busy-days-list {
padding: 8px;
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 4px;
}
.busy-day-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 10px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
background: transparent;
border: 1px solid transparent;
}
.busy-day-item:hover {
background: var(--bg-sunken);
border-color: var(--line);
transform: translateX(2px);
}
.busy-day-item.selected {
background: var(--apple-blue-bg);
border-color: var(--apple-blue);
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.10);
}
.busy-day-icon {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
background: var(--ink-mute);
}
.busy-day-item.urg-overdue .busy-day-icon {
background: var(--danger);
box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15);
}
.busy-day-item.urg-danger .busy-day-icon {
background: var(--danger);
box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.10);
}
.busy-day-item.urg-warn .busy-day-icon {
background: var(--warn);
box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.10);
}
.busy-day-item.urg-ok .busy-day-icon {
background: var(--ok);
box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.10);
}
.busy-day-info {
flex: 1;
min-width: 0;
}
.busy-day-date {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 2px;
}
.busy-day-md {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
}
.busy-day-wd {
font-family: var(--font-sans);
font-size: 11.5px;
color: var(--ink-soft);
font-weight: 500;
}
.busy-day-meta {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.02em;
}
.busy-day-count {
color: var(--ink);
font-weight: 700;
}
.busy-day-countdown {
color: var(--ink-mute);
padding-left: 8px;
border-left: 1px solid var(--line);
}
.busy-day-item.urg-overdue .busy-day-countdown,
.busy-day-item.urg-danger .busy-day-countdown {
color: var(--danger);
font-weight: 600;
}
.busy-day-item.urg-warn .busy-day-countdown {
color: var(--warn);
font-weight: 600;
}
.busy-days-empty {
padding: 32px 16px;
text-align: center;
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink-soft);
line-height: 1.6;
}
.busy-days-empty span {
font-size: 11px;
color: var(--ink-mute);
}
.busy-days-footer {
padding: 12px 18px;
border-top: 1px solid var(--line);
background: var(--bg-sunken);
display: flex;
justify-content: space-between;
gap: 16px;
}
.footer-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.footer-label {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-mute);
}
.footer-value {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.01em;
}
/* ============================================================
平铺/网格视图 (Grid View) — Trello 风紧凑卡片
============================================================ */
.grid-wrapper {
display: flex;
flex-direction: column;
gap: 18px;
}
.grid-stage-section {
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.grid-stage-header {
padding: 12px 18px;
background: rgba(245, 245, 247, 0.6);
border-bottom: 1px solid var(--line);
display: flex !important;
align-items: center;
gap: 10px;
}
.grid-stage-section.collapsed .grid-stage-header {
border-bottom: none;
}
.grid-stage-header .stage-tag {
font-size: 12px !important;
padding: 4px 12px !important;
font-weight: 600;
}
.grid-stage-count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
/* stage 分组标题里的"平均卡 X 天 · 最久 Y 天" */
.grid-stage-stuck {
font-family: var(--font-sans);
font-size: 12px;
color: var(--ink-mute);
margin-left: auto;
letter-spacing: -0.005em;
}
.grid-stage-stuck b {
color: var(--ink-soft);
font-weight: 600;
}
.style-grid, .po-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
padding: 16px;
}
.grid-card {
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
display: flex;
flex-direction: column;
transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-xs);
}
.grid-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--line-strong);
}
.grid-card-img-wrap {
position: relative;
height: 280px; /* 固定高度，不再用 aspect-ratio */
overflow: hidden;
background: var(--bg-sunken);
}
.grid-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.grid-card-img-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-sunken);
color: var(--ink-mute);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
}
.grid-card-stage-pill {
position: absolute;
top: 8px;
left: 8px;
font-size: 11px !important;
padding: 3px 8px !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.grid-card-body {
padding: 12px 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 140px; /* 统一卡片下半部分高度 */
}
.grid-card-row1 {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.grid-card-sku {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.02em;
}
.grid-card-status {
font-family: var(--font-sans);
font-size: 11.5px;
color: var(--ink-soft);
font-weight: 500;
letter-spacing: -0.005em;
margin-top: 2px;
padding-top: 8px;
border-top: 1px solid var(--line);
}
.grid-card-status.danger {
color: var(--danger);
font-weight: 600;
}
.grid-card-status.warn {
color: var(--warn);
font-weight: 600;
}
/* 大货 PO 卡片专属字段 */
.po-grid-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
margin-top: 2px;
}
.po-grid-num {
color: var(--ink-soft);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 60%;
}
.po-grid-color {
color: var(--ink-mute);
font-weight: 500;
}
.po-grid-ef {
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 600;
margin-top: 2px;
padding-top: 8px;
border-top: 1px solid var(--line);
}
.po-grid-ef.urg-danger { color: var(--danger); }
.po-grid-ef.urg-warn { color: var(--warn); }
.po-grid-ef.urg-ok { color: var(--ok-soft); }
/* 反单/新单徽章 */
.order-type-badge {
display: inline-block;
padding: 1px 6px;
border-radius: 4px;
font-family: var(--font-sans);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.order-type-new {
background: rgba(0, 122, 255, 0.10);
color: var(--apple-blue);
}
.order-type-repeat {
background: rgba(52, 199, 89, 0.10);
color: var(--ok-soft);
}
/* 紧迫度用 background gradient 代替 side-stripe(absolute ban) */
.grid-card.urgent-danger {
background: linear-gradient(to right, var(--danger-bg) 0%, var(--danger-bg) 4px, var(--bg-elevated) 6px);
box-shadow: var(--shadow-xs);
}
.grid-card.urgent-warn {
background: linear-gradient(to right, var(--warn-bg) 0%, var(--warn-bg) 4px, var(--bg-elevated) 6px);
box-shadow: var(--shadow-xs);
}
.grid-card.recently-updated {
background: linear-gradient(to right, #FDF5C4 0%, #FDF5C4 4px, var(--bg-elevated) 6px);
box-shadow: var(--shadow-xs);
}
/* ============================================================
"+ 加 PO" 顶部按钮
============================================================ */
.add-po-btn-top {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--apple-blue);
color: white;
border: none;
border-radius: 8px;
padding: 7px 14px;
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
letter-spacing: -0.005em;
box-shadow: 0 2px 6px rgba(0, 122, 255, 0.18);
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
margin-left: 6px;
}
.add-po-btn-top:hover {
background: var(--apple-blue-hover);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 122, 255, 0.25);
}
.add-po-btn-top .add-po-icon {
font-size: 16px;
font-weight: 400;
line-height: 1;
}
/* ============================================================
选款列表（加 PO 第一步）
============================================================ */
.po-style-pick-list {
max-height: 360px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 8px;
padding: 4px;
background: var(--bg-sunken);
border-radius: 10px;
}
.po-style-pick-item {
display: flex;
gap: 12px;
padding: 10px 12px;
background: var(--bg-elevated);
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.po-style-pick-item:hover {
border-color: var(--apple-blue);
background: var(--apple-blue-bg);
transform: translateY(-1px);
}
.po-style-pick-item img,
.po-style-pick-thumb-placeholder {
width: 44px;
height: 56px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
background: var(--bg-sunken);
}
.po-style-pick-thumb-placeholder {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
}
.po-style-pick-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.po-style-pick-row1 {
display: flex;
align-items: center;
gap: 6px;
}
.po-style-pick-sku {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: var(--ink);
}
.po-style-pick-meta {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
.po-import-demo-entry {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
padding: 12px 14px;
border: 1px solid rgba(0, 122, 255, 0.18);
border-radius: 10px;
background: rgba(0, 122, 255, 0.06);
}
.po-import-demo-entry strong {
display: block;
color: var(--ink);
font-size: 13px;
font-weight: 700;
}
.po-import-demo-entry span {
display: block;
margin-top: 2px;
color: var(--ink-soft);
font-size: 11.5px;
line-height: 1.4;
}
.po-import-demo-btn {
flex-shrink: 0;
border: 1px solid var(--apple-blue);
border-radius: 8px;
background: var(--apple-blue);
color: #fff;
padding: 7px 12px;
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
}
.po-import-demo {
display: grid;
gap: 12px;
}
.po-import-demo-help {
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--bg-sunken);
color: var(--ink-soft);
font-size: 12px;
line-height: 1.55;
}
.po-import-upload {
position: relative;
display: flex;
align-items: center;
gap: 14px;
min-height: 118px;
padding: 18px;
border: 1.5px dashed var(--line-strong);
border-radius: 12px;
background: var(--bg-sunken);
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.po-import-upload:hover,
.po-import-upload.drag-over {
border-color: var(--apple-blue);
background: var(--apple-blue-bg);
}
.po-import-upload.has-file {
border-style: solid;
border-color: rgba(52, 199, 89, 0.35);
background: var(--ok-bg);
}
.po-import-upload input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.po-import-upload-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 46px;
height: 46px;
border-radius: 10px;
background: var(--bg-elevated);
border: 1px solid var(--line);
color: var(--ok);
font-size: 24px;
}
.po-import-upload-main {
color: var(--ink);
font-size: 14px;
font-weight: 700;
}
.po-import-upload-sub {
margin-top: 4px;
color: var(--ink-soft);
font-size: 12px;
line-height: 1.45;
}
.po-import-file-name {
margin-top: 8px;
color: var(--ok);
font-size: 12px;
font-weight: 700;
}
.po-import-file-list {
display: block;
margin-top: -2px;
}
.po-import-file-drawer {
border: 1px solid var(--line);
border-radius: 10px;
background: var(--bg-elevated);
overflow: hidden;
}
.po-import-file-drawer summary {
min-height: 42px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 12px;
color: var(--ink);
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
list-style: none;
}
.po-import-file-drawer summary::-webkit-details-marker { display: none; }
.po-import-file-drawer summary .sub {
color: var(--ink-soft);
font-size: 12px;
font-weight: 700;
}
.po-import-file-chip-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 12px 12px;
}
.po-import-file-chip {
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 100%;
padding: 6px 8px 6px 10px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg-elevated);
color: var(--ink-soft);
font-size: 12px;
font-weight: 600;
}
.po-import-file-chip span {
min-width: 0;
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.po-import-file-chip button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 0;
border-radius: 999px;
background: rgba(120, 120, 128, 0.12);
color: var(--ink-soft);
font-size: 14px;
line-height: 18px;
cursor: pointer;
}
.po-import-file-chip button:hover {
background: rgba(255, 59, 48, 0.12);
color: var(--danger);
}
.po-import-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.po-import-action-btn {
border: 1px solid var(--line-strong);
border-radius: 8px;
background: var(--bg-elevated);
color: var(--ink);
padding: 7px 11px;
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
}
.po-import-action-btn:hover {
border-color: var(--apple-blue);
color: var(--apple-blue);
background: var(--apple-blue-bg);
}
.po-import-action-btn.subtle {
color: var(--ink-soft);
}
.po-import-demo-summary {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.po-import-demo-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 9px;
border-radius: 999px;
background: var(--bg-sunken);
color: var(--ink-soft);
font-size: 12px;
font-weight: 600;
}
.po-import-demo-pill.warn {
background: var(--warn-bg);
color: var(--warn);
}
.po-import-review {
border: 1px solid var(--line);
border-radius: 10px;
background: var(--bg-elevated);
overflow: hidden;
}
.po-import-review-head {
position: sticky;
top: 0;
z-index: 2;
display: grid;
gap: 10px;
padding: 12px;
border-bottom: 1px solid var(--line);
background: var(--bg-elevated);
}
.po-import-review-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.po-import-review-metric {
min-height: 66px;
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px 12px;
background: var(--bg-sunken);
}
.po-import-review-metric strong {
display: block;
color: var(--ink);
font-size: 22px;
line-height: 1.05;
font-weight: 900;
}
.po-import-review-metric span {
display: block;
margin-top: 5px;
color: var(--ink-soft);
font-size: 12px;
font-weight: 700;
}
.po-import-review-metric.ok {
border-color: rgba(52, 199, 89, 0.26);
background: var(--ok-bg);
}
.po-import-review-metric.ok strong { color: var(--ok); }
.po-import-review-metric.warn {
border-color: rgba(255, 149, 0, 0.28);
background: var(--warn-bg);
}
.po-import-review-metric.warn strong { color: var(--warn); }
.po-import-review-metric.info {
border-color: rgba(0, 122, 255, 0.22);
background: var(--apple-blue-bg);
}
.po-import-review-metric.info strong { color: var(--apple-blue); }
.po-import-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.po-import-filter-btn {
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg-sunken);
color: var(--ink-soft);
padding: 6px 10px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.po-import-filter-btn.active {
border-color: var(--ink);
background: var(--ink);
color: var(--bg-elevated);
}
.po-import-issue-panel {
margin: 0 12px 12px;
border: 1px solid rgba(255, 149, 0, 0.28);
border-radius: 10px;
background: var(--warn-bg);
overflow: hidden;
}
.po-import-issue-title {
padding: 10px 12px;
color: var(--warn);
font-size: 12.5px;
font-weight: 900;
border-bottom: 1px solid rgba(255, 149, 0, 0.18);
}
.po-import-issue-row {
padding: 9px 12px;
border-top: 1px solid rgba(255, 149, 0, 0.14);
color: var(--ink);
font-size: 12.5px;
line-height: 1.45;
}
.po-import-issue-row:first-child { border-top: 0; }
.po-import-issue-row b {
display: block;
margin-bottom: 2px;
font-size: 12.5px;
font-weight: 900;
}
.po-import-issue-row .sub {
display: block;
margin-top: 2px;
color: var(--ink-soft);
font-size: 11.5px;
}
.po-import-issue-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.po-import-issue-action {
border: 1px solid rgba(255, 149, 0, 0.32);
border-radius: 999px;
background: var(--bg-elevated);
color: var(--warn);
padding: 4px 9px;
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 800;
cursor: pointer;
}
.po-import-issue-action:hover {
border-color: rgba(255, 59, 48, 0.35);
background: rgba(255, 59, 48, 0.08);
color: var(--danger);
}
.po-import-demo-preview {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: var(--bg-elevated);
}
.po-import-demo-row {
display: grid;
grid-template-columns: 1.05fr 1.05fr 0.85fr 0.75fr 0.6fr 0.8fr;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-top: 1px solid var(--line);
font-size: 12.5px;
}
.po-import-demo-row:first-child {
border-top: 0;
background: var(--bg-sunken);
color: var(--ink-soft);
font-size: 11.5px;
font-weight: 700;
}
.po-import-demo-row .main {
color: var(--ink);
font-weight: 700;
}
.po-import-demo-row .sub {
margin-top: 2px;
color: var(--ink-soft);
font-size: 11.5px;
font-weight: 500;
}
.po-import-row-status {
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
padding: 4px 8px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg-sunken);
color: var(--ink-soft);
font-size: 11.5px;
font-weight: 800;
}
.po-import-row-status.matched {
border-color: rgba(0, 122, 255, 0.2);
background: var(--apple-blue-bg);
color: var(--apple-blue);
}
.po-import-row-status.create {
border-color: rgba(52, 199, 89, 0.22);
background: var(--ok-bg);
color: var(--ok);
}
.po-import-row-status.duplicate {
background: var(--bg-sunken);
color: var(--ink-mute);
}
.po-import-row-status.invalid,
.po-import-row-status.ambiguous,
.po-import-row-status.audit,
.po-import-row-status.archived {
border-color: rgba(255, 149, 0, 0.24);
background: var(--warn-bg);
color: var(--warn);
}
.po-import-demo-empty {
border: 1px dashed var(--line-strong);
border-radius: 10px;
padding: 18px;
color: var(--ink-soft);
text-align: center;
font-size: 12.5px;
}
.po-import-edit-list {
display: grid;
gap: 8px;
padding: 12px;
}
.po-import-edit-item {
border: 1px solid var(--line);
border-radius: 10px;
background: var(--bg-elevated);
overflow: hidden;
}
.po-import-edit-item[open] {
border-color: var(--line-strong);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.po-import-edit-item.is-blocked {
border-color: rgba(255, 149, 0, 0.34);
}
.po-import-edit-item.is-blocked > .po-import-edit-summary {
background: var(--warn-bg);
}
.po-import-edit-item.is-ok > .po-import-edit-summary {
background: linear-gradient(90deg, rgba(52, 199, 89, 0.06), rgba(52, 199, 89, 0));
}
.po-import-edit-summary {
display: grid;
grid-template-columns: 1.1fr 1.1fr 0.85fr 1fr 0.72fr;
gap: 10px;
align-items: center;
padding: 11px 12px;
cursor: pointer;
list-style: none;
}
.po-import-edit-summary::-webkit-details-marker { display: none; }
.po-import-edit-summary:hover { background: var(--bg-hover); }
.po-import-edit-summary .main {
color: var(--ink);
font-size: 12.5px;
font-weight: 800;
}
.po-import-edit-summary .sub {
margin-top: 2px;
color: var(--ink-soft);
font-size: 11.5px;
font-weight: 500;
line-height: 1.35;
}
.po-import-edit-summary .chev {
display: inline-flex;
align-items: center;
justify-content: flex-end;
color: var(--ink-mute);
font-size: 14px;
}
.po-import-edit-item[open] .po-import-edit-summary .chev {
transform: rotate(90deg);
}
.po-import-edit-body {
border-top: 1px solid var(--line);
padding: 14px 16px 16px;
background: var(--bg);
}
.po-import-edit-section {
margin-top: 14px;
}
.po-import-edit-section:first-child { margin-top: 0; }
.po-import-edit-section-title {
margin-bottom: 9px;
padding-bottom: 7px;
border-bottom: 1px solid var(--line);
color: var(--ink-soft);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.po-import-style-picker-row {
align-items: end;
}
.po-import-style-picker-row .form-field {
min-width: 0;
}
.po-import-style-picker-row select {
width: 100%;
min-width: 0;
}
.po-import-style-help {
margin-top: 6px;
color: var(--ink-soft);
font-size: 11.5px;
line-height: 1.5;
}
.po-import-edit-docs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 5px;
min-width: 0;
}
.po-import-edit-doc-chip {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg-sunken);
color: var(--ink-soft);
font-size: 11.5px;
font-weight: 650;
}
.po-import-edit-doc-chip span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.po-import-edit-doc-chip button {
width: 18px;
height: 18px;
flex: 0 0 auto;
border: 0;
border-radius: 999px;
background: rgba(0, 0, 0, 0.06);
color: var(--ink-soft);
font: inherit;
font-size: 13px;
font-weight: 800;
line-height: 1;
cursor: pointer;
}
.po-import-edit-doc-chip button:hover {
background: rgba(0, 0, 0, 0.12);
color: var(--ink);
}
.po-import-edit-doc-field {
margin-top: 10px;
}
.po-import-edit-doc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 0;
}
.po-import-doc-add {
border: 1px solid var(--apple-blue);
border-radius: 8px;
background: var(--bg-elevated);
color: var(--apple-blue);
padding: 6px 10px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.po-import-doc-add:hover {
background: var(--apple-blue-bg);
}
.po-import-doc-input {
display: none;
}
.po-import-edit-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-top: 14px;
}
.po-import-edit-save {
border: 1px solid var(--apple-blue);
border-radius: 8px;
background: var(--apple-blue);
color: var(--bg-elevated);
padding: 8px 13px;
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
}
.po-import-edit-save:hover {
filter: brightness(0.98);
}
@media (max-width: 720px) {
.po-import-review-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.po-import-edit-summary {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
.po-import-edit-summary > :nth-child(3),
.po-import-edit-summary > :nth-child(4) {
display: none;
}
.po-import-style-picker-row {
grid-template-columns: 1fr;
}
}
/* ============================================================
修滚动到底问题
============================================================ */
main#main {
padding-bottom: 120px !important; /* 确保底部有足够空间 */
}
/* ============================================================
修今日跟进卡片信息被挤问题
============================================================ */
.today-card .today-card-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}
/* ============================================================
平铺视图改造：横向卡片（图左 + 信息右）
============================================================ */
/* 覆盖原有的 grid 卡片样式 */
.style-grid, .po-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
gap: 12px !important;
padding: 16px !important;
}
@media (max-width: 1100px) {
.style-grid, .po-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
}
}
.grid-card {
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
display: flex !important;
flex-direction: row !important; /* 横向 */
transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-xs);
min-height: 130px;
}
.grid-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--line-strong);
}
.grid-card-img-wrap {
position: relative;
width: 110px !important;
flex-shrink: 0;
aspect-ratio: 3 / 4 !important; /* 固定比例，所有图统一裁切到同样高度 */
height: auto !important;
align-self: stretch; /* 没图也撑满卡片左侧 */
overflow: hidden;
background: var(--bg-sunken);
border-right: 1px solid var(--line);
}
.grid-card-img,
.grid-card-img-placeholder {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
}
.grid-card-img-placeholder {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.06em;
text-align: center;
}
.grid-card-stage-pill {
position: absolute !important;
top: 6px !important;
left: 6px !important;
font-size: 11px !important;
padding: 2px 6px !important;
background: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-weight: 600 !important;
}
.grid-card-body {
flex: 1;
padding: 10px 12px !important;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
justify-content: space-between;
}
.grid-card-row1 {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
row-gap: 4px;
}
.grid-card-sku {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.02em;
white-space: nowrap;
}
/* 横向卡片中标签紧凑化 */
.grid-card .client-badge,
.grid-card .order-type-pill,
.grid-card .sample-type-badge {
font-size: 11px !important;
padding: 2px 6px !important;
white-space: nowrap;
}
.grid-card-status {
font-family: var(--font-sans);
font-size: 11.5px;
color: var(--ink-soft);
font-weight: 500;
letter-spacing: -0.005em;
margin-top: auto;
padding-top: 6px;
border-top: 1px solid var(--line);
}
.grid-card-status.danger {
color: var(--danger);
font-weight: 600;
}
.grid-card-status.warn {
color: var(--warn);
font-weight: 600;
}
/* 紧迫度 gradient — 第二处覆盖(同上) */
.grid-card.urgent-danger {
background: linear-gradient(to right, var(--danger-bg) 0%, var(--danger-bg) 4px, var(--bg-elevated) 6px);
box-shadow: var(--shadow-xs);
}
.grid-card.urgent-warn {
background: linear-gradient(to right, var(--warn-bg) 0%, var(--warn-bg) 4px, var(--bg-elevated) 6px);
box-shadow: var(--shadow-xs);
}
.grid-card.recently-updated {
box-shadow: inset 4px 0 0 #C4B97A, var(--shadow-xs);
}
/* 大货 PO 卡片专属字段（横向版） */
.po-grid-card-meta {
display: flex;
flex-direction: column;
gap: 2px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
}
.po-grid-num {
color: var(--ink-soft);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.po-grid-color {
color: var(--ink-mute);
font-weight: 500;
}
.po-grid-ef {
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 600;
margin-top: auto;
padding-top: 6px;
border-top: 1px solid var(--line);
}
.po-grid-ef.urg-danger { color: var(--danger); }
.po-grid-ef.urg-warn { color: var(--warn); }
.po-grid-ef.urg-ok { color: var(--ok-soft); }
/* ============================================================
"+ 创建新款式" 入口（在加 PO 选款列表顶部）
============================================================ */
.po-style-pick-create-new {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 12px;
background: var(--apple-blue-bg);
border: 1.5px dashed var(--apple-blue);
border-radius: 8px;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
margin-bottom: 6px;
color: var(--apple-blue);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
}
.po-style-pick-create-new:hover {
background: var(--apple-blue);
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 122, 255, 0.25);
}
.po-style-pick-create-new .icon {
font-size: 16px;
line-height: 1;
}
/* ============================================================
列表点列头排序
============================================================ */
.list-header.simplified > div.sortable {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: 4px;
transition: color 0.12s;
}
.list-header.simplified > div.sortable:hover {
color: var(--ink);
}
.list-header.simplified > div.sortable.active {
color: var(--apple-blue) !important;
}
.list-header.simplified > div.sortable .sort-arrow {
font-size: 11px;
opacity: 0.5;
}
.list-header.simplified > div.sortable.active .sort-arrow {
opacity: 1;
}
/* ============================================================
月历右侧栏详情面板（替换忙日列表）
============================================================ */
.busy-days-panel.cal-detail-aside {
border: 1px solid var(--apple-blue);
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.10);
}
.cal-detail-aside-header {
padding: 14px 16px 8px;
background: rgba(0, 122, 255, 0.06);
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.cal-detail-aside-date {
display: flex;
align-items: baseline;
gap: 8px;
flex: 1;
min-width: 0;
}
.cal-detail-aside-date .cal-detail-md {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
}
.cal-detail-aside-date .cal-detail-wd {
font-family: var(--font-sans);
font-size: 12px;
color: var(--ink-soft);
font-weight: 500;
}
.cal-detail-aside-meta {
padding: 6px 16px 12px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--apple-blue);
letter-spacing: 0.04em;
font-weight: 600;
background: rgba(0, 122, 255, 0.04);
border-bottom: 1px solid var(--line);
}
.cal-detail-aside-list {
padding: 8px;
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 6px;
}
.cal-detail-item {
display: flex;
gap: 10px;
padding: 8px 10px;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.cal-detail-item:hover {
border-color: var(--apple-blue);
background: var(--apple-blue-bg);
transform: translateX(2px);
}
.cal-detail-thumb,
.cal-detail-thumb-placeholder {
width: 40px;
height: 50px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
background: var(--bg-sunken);
}
.cal-detail-thumb-placeholder {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
}
.cal-detail-item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.cal-detail-item-row1 {
display: flex;
align-items: center;
gap: 6px;
}
.cal-detail-item-sku {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 700;
color: var(--ink);
}
.cal-detail-item-name {
font-size: 12px;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.cal-detail-item-po {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--ink-mute);
}
.cal-detail-item-node {
font-family: var(--font-sans);
font-size: 11px;
color: var(--ink-soft);
font-weight: 500;
margin-top: 2px;
}
.cal-detail-item-node.danger { color: var(--danger); font-weight: 600; }
.cal-detail-item-node.warn { color: var(--warn); font-weight: 600; }
/* ============================================================
平铺：固定一排 4 个
============================================================ */
.style-grid, .po-grid {
grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1200px) {
.style-grid, .po-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 900px) {
.style-grid, .po-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 900px) {
.style-grid, .po-grid {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
平铺卡片：确保当前进度可见
============================================================ */
/* 当前进度永远显示 */
.grid-card-status {
display: block !important;
visibility: visible !important;
font-size: 11px !important;
margin-top: 4px !important;
}
/* ============================================================
月历右侧详情：PO 号优先样式
============================================================ */
.cal-detail-item-po-num {
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.02em;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cal-detail-item-sub {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--ink-mute);
margin-top: 1px;
}
.cal-detail-item-sub .cal-detail-item-sku {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
color: var(--ink-soft);
background: var(--bg-sunken);
padding: 1px 5px;
border-radius: 4px;
}
.cal-detail-item-sub .cal-detail-item-color {
color: var(--ink-mute);
}
/* 月历 chip：PO 号样式（取代 sku）*/
.cal-po-chip .cal-po-num {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.02em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
/* 平铺卡片：状态行（阶段标签 + 节点）*/
.grid-card-status-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--line);
flex-wrap: wrap;
}
/* stuck X 天 — 在当前 stage 卡了多久 */
.grid-card-stuck {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
font-weight: 600;
margin-left: auto;
flex-shrink: 0;
letter-spacing: 0.02em;
}
.grid-card-stuck.warn { color: var(--warn); }
.grid-card-stuck.danger { color: var(--danger); }
.grid-card-status-row .stage-tag {
font-size: 11px !important;
padding: 2px 8px !important;
font-weight: 600;
flex-shrink: 0;
}
.grid-card-node {
font-family: var(--font-sans);
font-size: 11.5px;
color: var(--ink);
font-weight: 500;
letter-spacing: -0.005em;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.grid-card-node.danger {
color: var(--danger);
font-weight: 600;
}
.grid-card-node.warn {
color: var(--warn);
font-weight: 600;
}
/* 让原来的 grid-card-status（旧版本）也隐藏 — 防止旧 CSS 冲突 */
.grid-card-status:not(.grid-card-node) {
display: none;
}
/* ============================================================
平铺卡片：高度对齐 & 款号长度自适应（修复 bug）
============================================================ */
/* 卡片基础最小高度，保证每张卡片至少一致 */
.grid-card {
min-height: 150px !important;
align-items: stretch;
}
/* row1 允许换行（长款号 + 多个标签时换行而不是溢出） */
.grid-card-row1 {
flex-wrap: wrap !important;
align-items: center;
row-gap: 4px;
}
/* 款号：长款号允许换行而不是被截断 */
.grid-card-sku {
white-space: normal !important;
word-break: break-all !important;
line-height: 1.25 !important;
flex: 0 1 auto !important;
min-width: 0;
}
/* 状态行：固定推到底部，所有卡片对齐 */
.grid-card-body {
justify-content: flex-start !important;
gap: 6px;
}
.grid-card-status-row {
margin-top: auto !important;
}
/* 列头排序：更明显的视觉反馈 */
.list-header.simplified > div.sortable {
transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.12s, opacity 0.12s, box-shadow 0.12s;
border-radius: 4px;
padding: 2px 6px;
margin: -2px -6px;
}
.list-header.simplified > div.sortable:hover {
background: var(--apple-blue-bg);
color: var(--apple-blue);
}
.list-header.simplified > div.sortable:active {
transform: scale(0.96);
}
.list-header.simplified > div.sortable.active {
background: rgba(0, 122, 255, 0.10);
color: var(--apple-blue) !important;
font-weight: 600;
}
/* ============================================================
全局键盘 focus-visible（无障碍 + 苹果风蓝光晕）
============================================================ */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: none;
box-shadow: var(--focus-ring) !important;
transition: box-shadow 0.15s ease;
}
button:disabled,
button[aria-disabled="true"] {
cursor: not-allowed !important;
opacity: 0.58;
box-shadow: none !important;
transform: none !important;
}
button:disabled:hover,
button[aria-disabled="true"]:hover,
button:disabled:active,
button[aria-disabled="true"]:active {
transform: none !important;
}
/* 卡片类元素 focus 时的特殊处理（避免双重描边）*/
.style-card:focus-visible,
.po-row:focus-visible,
.grid-card:focus-visible,
.cal-detail-item:focus-visible,
.prod-grid-po-row:focus-visible,
.prod-date-card:focus-visible {
outline: none;
box-shadow: var(--focus-ring), var(--shadow-md) !important;
}
/* Firefox 滚动条变细 */
* {
scrollbar-width: thin;
}
/* ============================================================
Toast (顶部滑入轻提示)
============================================================ */
.toast-stack {
position: fixed;
top: 24px;
left: 50%;
transform: translateX(-50%);
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
align-items: center;
}
.toast {
pointer-events: auto;
background: rgba(40, 40, 40, 0.92);
color: white;
padding: 11px 18px;
border-radius: 12px;
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
display: flex;
align-items: center;
gap: 10px;
min-width: 180px;
max-width: 90vw;
animation: toast-slide-in 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast-msg {
min-width: 0;
overflow-wrap: anywhere;
}
.toast.toast-out {
animation: toast-slide-out 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.toast-icon {
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.toast.toast-info .toast-icon { background: var(--apple-blue); color: white; }
.toast.toast-warn .toast-icon { background: #FF9500; color: white; }
.toast.toast-error .toast-icon { background: #FF3B30; color: white; }
.toast.toast-ok .toast-icon { background: #34C759; color: white; }
/* === 撤销 toast 的撤销按钮 === */
.toast-undo-btn {
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.22);
color: white;
padding: 5px 13px;
border-radius: 8px;
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0;
cursor: pointer;
margin-left: 4px;
transition: background 0.15s ease;
}
.toast-undo-btn:hover {
background: rgba(255,255,255,0.26);
}
.toast-undo-btn:active {
background: rgba(255,255,255,0.34);
}
/* === 抽屉里"退回上一步"次级按钮 === */
.btn-revert-step {
background: var(--bg-sunken) !important;
color: var(--ink-mute) !important;
border: 1px solid var(--line) !important;
font-size: 12px !important;
font-weight: 400 !important;
padding: 7px 12px !important;
}
.btn-revert-step:hover {
background: var(--bg-elevated) !important;
color: var(--ink-soft) !important;
border-color: var(--line-strong) !important;
}
/* === 已弃用：我手上有样按钮的样式（不再使用，保留兼容） === */
.have-sample-bar { display: none; }
.btn-have-sample { display: none; }
/* === 抽屉里跟单专用「已收到样品」跳跃按钮 === */
.btn-receive-jump {
background: rgba(0, 122, 255, 0.08) !important;
color: var(--apple-blue, #007AFF) !important;
border: 1px solid rgba(0, 122, 255, 0.18) !important;
font-size: 12.5px !important;
font-weight: 500 !important;
padding: 7px 13px !important;
}
.btn-receive-jump:hover {
background: rgba(0, 122, 255, 0.14) !important;
border-color: rgba(0, 122, 255, 0.32) !important;
}
/* === 今日跟进顶部搜索栏 === */
.today-search-bar {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
/* 右侧给浮动工具区（铃铛 + 批量按钮）让出空间，避免重叠
floating-tools 在 right:24px，宽度约 36*2 + gap 8 = 80px，加上余量 */
margin-right: 96px;
/* sticky 时下方滚动的卡片有阴影/红边框，半透明背景压不住 → 改用实色 + 柔和阴影分隔 */
background: var(--bg);
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 8px;
box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.08);
}
@media (max-width: 600px) {
.today-search-bar {
/* 移动端浮动按钮更靠右且更小，留余量即可 */
margin-right: 84px;
}
}
.today-search-bar svg {
flex-shrink: 0; color: var(--ink-mute);
}
.today-search-bar input {
flex: 1;
min-width: 0;
height: 28px;
padding: 0;
background: transparent;
border: none;
outline: none;
font-family: var(--font-sans);
font-size: 14px;
line-height: 28px;
color: var(--ink);
}
.today-search-bar input::placeholder {
color: var(--ink-mute);
}
/* focus 状态：和"搜款号"那里的搜索框统一 — 苹果蓝细边 + 柔和光晕，
光晕加在外层容器上（input 本身没边框，外层椭圆才是视觉上的边框）*/
.today-search-bar:focus-within {
border-color: var(--apple-blue) !important;
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15) !important;
}
/* 管理者专属:全角色待处理总览 */
.admin-overview-bar {
display: flex; gap: 8px; align-items: center;
padding: 6px 4px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.admin-overview-bar .lbl {
font-size: 11px; color: var(--ink-mute);
letter-spacing: 0.04em;
margin-right: 4px;
text-transform: uppercase;
}
.admin-overview-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 8px;
font-size: 12px; color: var(--ink-soft);
cursor: pointer;
font-family: inherit;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.admin-overview-chip:hover {
background: var(--bg-hover);
border-color: var(--line-strong);
color: var(--ink);
}
.admin-overview-chip.active {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.admin-overview-chip .role { font-weight: 500; }
.admin-overview-chip .num {
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--ink);
}
.admin-overview-chip.active .num { color: #fff; }
.admin-overview-chip.zero .num { color: var(--ink-mute); font-weight: 500; }
.today-search-bar input:focus,
.today-search-bar input:focus-visible {
/* 关掉全局的 focus-ring，避免双重蓝光 */
box-shadow: none !important;
outline: none !important;
}
.today-search-clear {
background: var(--bg-sunken);
border: 1px solid var(--line);
color: var(--ink-soft);
width: 24px; height: 24px;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.today-search-clear:hover {
background: var(--line-strong);
color: var(--ink);
}
.today-search-result-info {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
flex-shrink: 0;
}
.today-search-empty {
padding: 50px 20px;
text-align: center;
color: var(--ink-mute);
font-size: 14px;
}
/* === 全局搜索弹窗：左上角放大镜专用，与当前 tab 搜索完全分开 === */
.erp-command-search-backdrop {
position: fixed;
inset: 0;
z-index: 24000;
padding: 54px 28px 28px;
display: flex;
align-items: flex-start;
justify-content: center;
background: rgba(28, 28, 30, 0.25);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.16s ease, visibility 0.16s ease;
}
.erp-command-search-backdrop.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.erp-command-search-dialog {
width: min(1040px, 100%);
max-height: calc(100vh - 108px);
overflow: hidden;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: 24px;
box-shadow: 0 28px 72px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.08);
transform: translateY(-8px) scale(0.985);
transform-origin: top center;
transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.erp-command-search-backdrop.open .erp-command-search-dialog {
transform: translateY(0) scale(1);
}
.erp-command-search-input-row {
min-height: 68px;
padding: 0 24px;
display: flex;
align-items: center;
gap: 13px;
border-bottom: 1px solid var(--line);
}
.erp-command-search-input-row > svg {
width: 23px;
height: 23px;
color: var(--ink-mute);
flex-shrink: 0;
}
.erp-command-search-input {
min-width: 0;
flex: 1;
height: 52px;
padding: 0;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
color: var(--ink);
font: 500 20px/1.3 var(--font-sans);
letter-spacing: -0.015em;
}
.erp-command-search-input::placeholder {
color: #9A9AA0;
}
.erp-command-search-esc,
.erp-command-search-enter {
min-width: 34px;
height: 26px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #E2E2E6;
border-radius: 8px;
background: #F5F5F6;
color: var(--ink-mute);
font: 600 11px/1 var(--font-sans);
white-space: nowrap;
}
.erp-command-search-results {
min-height: 230px;
max-height: min(610px, calc(100vh - 230px));
overflow-y: auto;
overscroll-behavior: contain;
padding: 12px;
scrollbar-width: thin;
}
.erp-command-search-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 4px 12px 9px;
color: var(--ink-mute);
font: 600 12px/1.2 var(--font-sans);
}
.erp-command-search-row {
width: 100%;
min-height: 62px;
padding: 8px 12px;
display: grid;
grid-template-columns: 36px minmax(0, 1fr) minmax(130px, auto) 38px;
align-items: center;
gap: 12px;
border: 0;
border-radius: 14px;
background: transparent;
color: var(--ink);
font-family: var(--font-sans);
text-align: left;
cursor: pointer;
}
.erp-command-search-row:hover,
.erp-command-search-row.is-active,
.erp-command-search-row:focus-visible {
background: #F0F0F2;
outline: none;
}
.erp-command-search-row-icon {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-soft);
}
.erp-command-search-row-icon svg {
width: 22px;
height: 22px;
}
.erp-command-search-row-copy,
.erp-command-search-row-context {
min-width: 0;
}
.erp-command-search-row-copy strong,
.erp-command-search-row-copy small,
.erp-command-search-row-context strong,
.erp-command-search-row-context small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.erp-command-search-row-copy strong {
color: var(--ink);
font-size: 15px;
font-weight: 650;
letter-spacing: -0.01em;
}
.erp-command-search-row-copy small,
.erp-command-search-row-context small {
margin-top: 3px;
color: var(--ink-mute);
font-size: 12px;
}
.erp-command-search-row-context {
text-align: right;
}
.erp-command-search-row-context strong {
color: var(--ink-soft);
font-size: 13px;
font-weight: 600;
}
.erp-command-search-empty {
min-height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 32px;
color: var(--ink-mute);
text-align: center;
}
.erp-command-search-empty strong {
color: var(--ink-soft);
font-size: 15px;
font-weight: 600;
}
.erp-command-search-empty span {
font-size: 12px;
}
.erp-command-search-footer {
min-height: 42px;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
border-top: 1px solid var(--line);
color: var(--ink-mute);
font: 500 11px/1 var(--font-sans);
}
.erp-command-search-footer span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.erp-command-search-footer kbd {
min-width: 22px;
height: 20px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #E2E2E6;
border-radius: 6px;
background: #F5F5F6;
color: var(--ink-soft);
font: inherit;
}
@media (max-width: 680px) {
.erp-command-search-backdrop {
padding: 12px 8px;
}
.erp-command-search-dialog {
max-height: calc(100vh - 24px);
border-radius: 18px;
}
.erp-command-search-input-row {
min-height: 60px;
padding: 0 16px;
}
.erp-command-search-input {
font-size: 16px;
}
.erp-command-search-results {
max-height: calc(100vh - 150px);
padding: 8px;
}
.erp-command-search-row {
grid-template-columns: 32px minmax(0, 1fr) 30px;
gap: 8px;
padding: 8px;
}
.erp-command-search-row-context {
display: none;
}
.erp-command-search-footer {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.erp-command-search-backdrop,
.erp-command-search-dialog {
transition: none;
}
}
.followup-po-alert {
display: grid;
grid-template-columns: minmax(190px, 260px) 1fr;
gap: 12px;
align-items: stretch;
margin: 8px 0 14px;
padding: 12px 14px;
border: 1px solid rgba(255, 59, 48, 0.22);
border-radius: 10px;
background: linear-gradient(135deg, #FFF1F0, #FFF8F0);
box-shadow: 0 8px 18px rgba(255, 59, 48, 0.08);
}
.followup-po-alert-head {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
min-width: 0;
}
.followup-po-alert-title {
font-size: 13px;
font-weight: 800;
color: #9F1239;
}
.followup-po-alert-sub {
font-size: 11.5px;
color: #9A3412;
line-height: 1.45;
}
.followup-po-alert-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
min-width: 0;
}
.followup-po-alert-row {
display: inline-grid;
grid-template-columns: minmax(82px, auto) auto;
gap: 3px 9px;
align-items: center;
max-width: 310px;
padding: 7px 10px;
border: 1px solid rgba(255, 59, 48, 0.18);
border-radius: 8px;
background: rgba(255,255,255,0.76);
cursor: pointer;
transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.followup-po-alert-row:hover {
transform: translateY(-1px);
border-color: rgba(255, 59, 48, 0.42);
box-shadow: 0 6px 12px rgba(255, 59, 48, 0.12);
}
.followup-po-alert-sku {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 800;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.followup-po-alert-po,
.followup-po-alert-ex {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--ink-mute);
white-space: nowrap;
}
.followup-po-alert-days {
justify-self: end;
grid-row: 1 / span 2;
grid-column: 2;
padding: 3px 7px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
white-space: nowrap;
}
.followup-po-alert-days.warn { background: #FFF7ED; color: #B45309; }
.followup-po-alert-days.danger { background: #FEE2E2; color: #B91C1C; }
.followup-po-alert-days.overdue { background: #FECACA; color: #991B1B; }
.followup-po-alert-days.severe { background: linear-gradient(135deg, #7F1D1D, #450A0A); color: #fff; }
@media (max-width: 760px) {
.followup-po-alert { grid-template-columns: 1fr; }
.followup-po-alert-row { width: 100%; max-width: none; }
}
.today-card.search-selected-kept {
order: -1;
border-color: rgba(0, 122, 255, 0.45) !important;
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.16), inset 4px 0 0 var(--apple-blue) !important;
}
.today-card.search-selected-kept::after {
content: "已选保留";
position: absolute;
top: 8px;
right: 10px;
padding: 2px 7px;
border-radius: 999px;
background: var(--apple-blue);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 1.4;
box-shadow: 0 4px 10px rgba(0, 122, 255, 0.18);
}
/* 今日跟进 tab 主区减少顶部留白 */
body.today-tab-active main#main {
padding-top: 14px !important;
}
/* ============================================================
样板返修 (rework / revision) — 跟单收样后发现做坏，退回版房返修
配色沿用 --stage-revise（橙色），与"重做板"标签视觉一致
============================================================ */
/* 返修中卡片：左色条用 revise 橙 */
.today-card.is-rework {
border-left-color: var(--stage-revise) !important;
}
.today-card.is-rework .today-card-action-main {
color: var(--stage-revise) !important;
}
/* 返修徽章 — 用在卡片状态行、流程图收样节点旁等位置 */
.rework-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 7px;
border-radius: 4px;
background: var(--stage-revise-bg);
color: var(--stage-revise);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2px;
white-space: nowrap;
}
.rework-badge.large {
font-size: 11px;
padding: 2px 8px;
}
/* 流程图节点旁的返修小徽章 */
.big-flow-rework {
display: inline-flex;
align-items: center;
gap: 3px;
margin-top: 4px;
padding: 1px 6px;
border-radius: 4px;
background: var(--stage-revise-bg);
color: var(--stage-revise);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
cursor: help;
border: 1px solid var(--stage-revise);
}
/* 返修按钮 — 在 drawer 的操作区，作为次要动作 */
.btn-rework {
background: var(--stage-revise-bg) !important;
color: var(--stage-revise) !important;
border: 1px solid var(--stage-revise) !important;
}
.btn-rework:hover {
background: var(--stage-revise) !important;
color: white !important;
}
/* cycle-redo-v1: 整版重做按钮(红色,更醒目,比返修更重) */
.btn-redo {
background: var(--danger-bg, #FFE5E5) !important;
color: var(--danger, #D70015) !important;
border: 1px solid var(--danger, #D70015) !important;
font-weight: 600 !important;
}
.btn-redo:hover {
background: var(--danger, #D70015) !important;
color: white !important;
}
/* reset-to-fresh-pattern-v1: 「♻️ 重新开板」按钮 — 琥珀色 ghost(破坏性但区别于"删除") */
.btn-reset-pattern {
background: var(--warn-bg, #FFF2E0) !important;
color: var(--warn, #B25E00) !important;
border: 1px solid var(--warn, #B25E00) !important;
font-weight: 600 !important;
}
.btn-reset-pattern:hover { background: var(--warn, #B25E00) !important; color: #fff !important; }
/* cycle-redo-v1: 在 chip / 状态栏旁边显示 ♻️ 重做 小标 */
.redo-mini-tag {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
background: #FFEBEA;
color: #FF3B30;
border: 1px solid #FF3B30;
cursor: help;
margin-left: 6px;
}
.redo-mini-tag.large {
padding: 4px 10px;
font-size: 12px;
}
/* cycle-redo-v1: 抽屉顶部的"重做说明卡" */
.redo-card {
border: 2px solid #FF3B30;
background: #FFEBEA;
border-radius: 12px;
padding: 14px 16px;
margin: 12px 0 16px;
}
.redo-card-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
cursor: pointer;
user-select: none;
}
.redo-card-title {
font-size: 14px;
font-weight: 700;
color: #FF3B30;
display: flex;
align-items: center;
gap: 6px;
}
.redo-card-meta {
font-size: 11.5px;
color: var(--ink-mute);
}
.redo-card.collapsed .redo-card-body { display: none; }
.redo-card.collapsed .redo-chev::before { content: '▾'; }
.redo-chev::before { content: '▴'; }
.redo-section { margin-bottom: 10px; }
.redo-section:last-child { margin-bottom: 0; }
.redo-section-label {
font-size: 11px;
color: var(--ink-mute);
font-weight: 600;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.redo-section-content {
font-size: 13px;
color: var(--ink);
background: rgba(255,255,255,0.65);
padding: 8px 12px;
border-radius: 8px;
border: 1px solid rgba(255,59,48,0.2);
line-height: 1.5;
}
.redo-photos {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.redo-photo-thumb {
width: 54px;
height: 68px;
border-radius: 6px;
border: 2px solid rgba(255,59,48,0.3);
object-fit: cover;
background: #ddd;
cursor: pointer;
}
/* cycle-redo-v1 (undo): 撤销作废按钮 */
.btn-undo-abandon {
background: #fff;
color: #FF3B30;
border: 1px solid #FF3B30;
padding: 6px 14px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.12s;
}
.btn-undo-abandon:hover {
background: #FF3B30;
color: #fff;
}
/* 时间线上作废 cycle 节点的样式 */
.tl-abandoned {
color: var(--ink-mute) !important;
text-decoration: line-through;
opacity: 0.7;
}
.tl-abandoned-tag {
background: var(--gray-bg, #F2F2F7);
color: var(--gray, #86868B);
padding: 2px 8px;
border-radius: 10px;
font-size: 10.5px;
margin-left: 6px;
text-decoration: none;
display: inline-block;
font-weight: 500;
}
/* 返修中状态下的"已收回"按钮（主操作）*/
.btn-rework-receive {
background: var(--stage-revise) !important;
color: white !important;
border: 1px solid var(--stage-revise) !important;
}
.btn-rework-receive:hover {
filter: brightness(1.08);
}
/* 返修登记 modal 内部样式 */
.rework-modal-section {
margin-bottom: 14px;
}
.rework-modal-section > label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--ink-soft);
margin-bottom: 6px;
}
.rework-radio-group,
.rework-check-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.rework-radio-group label,
.rework-check-group label {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
font-size: 13px;
color: var(--ink);
transition: border-color 0.12s, background 0.12s;
}
.rework-radio-group label:hover,
.rework-check-group label:hover {
border-color: var(--stage-revise);
background: var(--stage-revise-bg);
}
.rework-radio-group input[type="radio"]:checked + span,
.rework-check-group input[type="checkbox"]:checked + span {
color: var(--stage-revise);
font-weight: 600;
}
.rework-radio-group label:has(input:checked),
.rework-check-group label:has(input:checked) {
border-color: var(--stage-revise);
background: var(--stage-revise-bg);
}
.rework-modal-section textarea {
width: 100%;
min-height: 60px;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: 8px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink);
resize: vertical;
outline: none;
}
.rework-modal-section textarea:focus {
border-color: var(--stage-revise);
}
.rework-modal-section input[type="date"] {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--bg-elevated);
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink);
outline: none;
}
.rework-modal-section input[type="date"]:focus {
border-color: var(--stage-revise);
box-shadow: 0 0 0 3px rgba(201, 91, 0, 0.10);
}
/* 返修历史时间线（drawer 内展示）*/
.rework-history {
margin-top: 12px;
padding: 10px 12px;
background: var(--stage-revise-bg);
border: 1px solid var(--stage-revise);
border-radius: 8px;
}
.rework-history-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--stage-revise);
margin-bottom: 6px;
}
.rework-history-item {
font-size: 11px;
color: var(--ink-soft);
font-family: var(--font-mono);
line-height: 1.6;
padding: 3px 0;
border-top: 1px dashed rgba(178, 84, 0, 0.2);
}
.rework-history-item:first-of-type { border-top: none; }
.rework-history-item .reason {
color: var(--stage-revise);
font-weight: 600;
}
/* === "我手上有样"搜索弹窗 === */
.have-sample-modal-search {
width: 100%;
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
padding: 10px 12px;
font-family: var(--font-sans);
font-size: 14px;
border-radius: 8px;
outline: none;
margin-bottom: 12px;
}
.have-sample-modal-search:focus {
border-color: var(--ink);
}
.have-sample-results {
max-height: 380px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 6px;
}
.have-sample-result-item {
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
background: var(--bg-elevated);
transition: border-color 0.12s ease, background 0.12s ease;
}
.have-sample-result-item:hover {
border-color: var(--ink);
background: var(--bg-hover);
}
.have-sample-result-item .thumb,
.have-sample-result-item .thumb-placeholder {
width: 36px; height: 46px; flex-shrink: 0; border-radius: 6px;
}
.have-sample-result-item .info { flex: 1; min-width: 0; }
.have-sample-result-item .info .sku {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
color: var(--ink);
word-break: break-all;
}
.have-sample-result-item .info .meta {
font-size: 11px;
color: var(--ink-mute);
margin-top: 2px;
}
.have-sample-result-item .stage-tag {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
color: var(--ink-mute);
flex-shrink: 0;
}
.have-sample-empty {
text-align: center;
color: var(--ink-mute);
padding: 30px 12px;
font-size: 13px;
}
@keyframes toast-slide-in {
from { opacity: 0; transform: translateY(-30px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-slide-out {
to { opacity: 0; transform: translateY(-10px) scale(0.98); }
}
/* ============================================================
Dialog (毛玻璃确认框)
============================================================ */
.app-dialog-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: var(--z-modal-backdrop);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-dialog-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.app-dialog {
background: rgba(252, 252, 252, 0.92);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 18px;
padding: 22px 22px 16px;
min-width: 280px;
max-width: 380px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
z-index: var(--z-modal);
transform: scale(0.94);
opacity: 0;
transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
}
.app-dialog-backdrop.open .app-dialog {
transform: scale(1);
opacity: 1;
}
.app-dialog-title {
font-family: var(--font-sans);
font-size: 15.5px;
font-weight: 600;
color: var(--ink);
text-align: center;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.app-dialog-message {
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink-soft);
text-align: center;
margin: 0 0 18px;
line-height: 1.5;
letter-spacing: -0.005em;
}
.app-dialog-actions {
display: flex;
gap: 8px;
flex-direction: row;
}
.app-dialog-btn {
flex: 1;
padding: 10px 16px;
border-radius: 10px;
font-family: var(--font-sans);
font-size: 13.5px;
font-weight: 600;
border: none;
cursor: pointer;
letter-spacing: -0.005em;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.app-dialog-btn.btn-cancel {
background: rgba(0, 0, 0, 0.06);
color: var(--ink);
}
.app-dialog-btn.btn-cancel:hover { background: rgba(0, 0, 0, 0.10); }
.app-dialog-btn.btn-confirm {
background: var(--apple-blue, #007AFF);
color: white;
}
.app-dialog-btn.btn-confirm:hover { background: #0066d6; }
.app-dialog-btn.btn-danger {
background: #FF3B30;
color: white;
}
.app-dialog-btn.btn-danger:hover { background: #d92e25; }
.app-dialog-input {
width: 100%;
margin: 10px 0 16px;
padding: 10px 12px;
border: 1px solid var(--line-strong, #D1D1D6);
border-radius: 9px;
background: var(--bg-elevated, #fff);
color: var(--ink, #1D1D1F);
font-family: var(--font-sans);
font-size: 13.5px;
box-sizing: border-box;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.app-dialog-input:focus {
border-color: var(--apple-blue, #007AFF);
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}
.app-dialog-input::placeholder { color: var(--ink-mute, #86868B); }
/* ============================================================
登录页（毛玻璃 + 阴影 + 抖动）
============================================================ */
.login-page {
position: fixed;
inset: 0;
z-index: var(--z-login);
background: linear-gradient(135deg, #F5F5F7 0%, #E8E8EC 50%, #F0EFEC 100%);
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.login-page.fading-out {
opacity: 0;
pointer-events: none;
}
.login-page.hidden {
display: none;
}
/* 装饰背景圆斑 */
.login-page::before,
.login-page::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.5;
pointer-events: none;
}
.login-page::before {
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(0, 122, 255, 0.35), transparent 70%);
top: 10%;
left: 8%;
}
.login-page::after {
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(175, 82, 222, 0.30), transparent 70%);
bottom: 12%;
right: 10%;
}
.login-card {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 24px;
padding: 40px 38px 32px;
width: 360px;
max-width: 90vw;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.12),
0 4px 18px rgba(0, 0, 0, 0.06),
inset 0 1px 1px rgba(255, 255, 255, 0.7);
position: relative;
z-index: 2;
transform: scale(1) translateY(0);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.login-card.success {
transform: scale(0.96) translateY(-6px);
opacity: 0;
}
/* icp-footer-v1: 登录页底部备案号(法规要求公开页面显示 + 链工信部) */
.login-beian {
position: absolute;
left: 0; right: 0; bottom: 20px;
text-align: center;
font-size: 12px;
z-index: 3;
pointer-events: none;
}
.login-beian a {
pointer-events: auto;
color: rgba(60, 60, 67, 0.45);
text-decoration: none;
letter-spacing: 0.2px;
}
.login-beian a:hover { color: rgba(60, 60, 67, 0.78); text-decoration: underline; }
.login-logo {
text-align: center;
margin-bottom: 28px;
}
.login-logo-icon {
font-size: 38px;
margin-bottom: 10px;
display: inline-block;
animation: logo-float 3s ease-in-out infinite;
}
@keyframes logo-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.login-logo-name {
font-family: var(--font-serif, 'Source Han Serif', serif);
font-style: italic;
font-size: 22px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.login-logo-tag {
font-family: var(--font-mono, monospace);
font-size: 10.5px;
letter-spacing: 0.08em;
color: var(--ink-mute);
text-transform: uppercase;
}
.login-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.login-field {
display: flex;
flex-direction: column;
gap: 5px;
}
.login-field label {
font-family: var(--font-sans);
font-size: 11px;
color: var(--ink-soft);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 600;
margin-left: 2px;
}
.login-field input {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(0, 0, 0, 0.10);
border-radius: 10px;
padding: 11px 14px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--ink);
transition: background-color 0.18s, border-color 0.18s, color 0.18s, transform 0.18s, opacity 0.18s, box-shadow 0.18s;
outline: none;
}
.login-field input::placeholder {
color: var(--ink-mute);
font-family: var(--font-mono, monospace);
font-size: 13px;
letter-spacing: 0.02em;
}
.login-field input:focus {
background: white;
border-color: var(--apple-blue, #007AFF);
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}
/* iOS 经典抖动动画 */
.login-field.shake input {
animation: ios-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
border-color: #FF3B30;
}
@keyframes ios-shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
20%, 40%, 60%, 80% { transform: translateX(6px); }
}
.login-submit-btn {
margin-top: 10px;
background: var(--apple-blue, #007AFF);
color: white;
border: none;
border-radius: 11px;
padding: 13px 16px;
font-family: var(--font-sans);
font-size: 14.5px;
font-weight: 600;
letter-spacing: 0.06em;
cursor: pointer;
transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 14px rgba(0, 122, 255, 0.28);
}
.login-submit-btn:hover {
background: #0066d6;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0, 122, 255, 0.36);
}
.login-submit-btn:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.20);
}
.login-hint {
margin-top: 4px;
text-align: center;
font-family: var(--font-mono, monospace);
font-size: 10.5px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
/* 记住我复选框 */
.login-remember {
display: flex;
align-items: center;
gap: 8px;
margin-top: -4px;
margin-bottom: 6px;
font-family: var(--font-sans);
font-size: 12.5px;
color: var(--ink-soft);
cursor: pointer;
user-select: none;
}
.login-remember input[type="checkbox"] {
width: 14px;
height: 14px;
cursor: pointer;
accent-color: var(--ink);
}
.login-remember:hover { color: var(--ink); }
/* 主应用淡入 */
.app-shell {
opacity: 1;
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-shell.hidden {
display: none;
}
.app-shell.fading-in {
opacity: 0;
animation: app-fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
animation-delay: 0.1s;
}
@keyframes app-fade-in {
from { opacity: 0; transform: scale(0.99); }
to { opacity: 1; transform: scale(1); }
}
/* 侧栏退出按钮 */
.sidebar-logout-btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
background: transparent;
border: none;
padding: 9px 12px;
border-radius: 8px;
color: var(--ink-soft);
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
margin-top: 4px;
letter-spacing: -0.005em;
}
.sidebar-logout-btn:hover {
background: rgba(255, 59, 48, 0.08);
color: #FF3B30;
}
.sidebar-logout-btn svg {
flex-shrink: 0;
}
/* ============================================================
大货跟进 - 平铺方块网格 (启动台风格)
============================================================ */
.prod-month-panel { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 12px; background: var(--bg-elevated); }
.prod-month-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; user-select: none; transition: background 0.12s; }
.prod-month-header:hover { background: var(--bg-sunken); }
.prod-month-label { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink); }
.prod-month-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); background: var(--bg-sunken); padding: 2px 8px; border-radius: 10px; }
.prod-month-chevron { font-size: 11px; color: var(--ink-mute); transition: transform 0.2s; margin-left: auto; }
.prod-month-panel.open .prod-month-chevron { transform: rotate(180deg); }
.prod-month-body { display: none; padding: 0 16px 16px; }
.prod-month-panel.open .prod-month-body { display: block; }
.prod-grid-wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 18px;
padding: 20px;
}
.prod-tile {
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 16px;
padding: 14px;
cursor: pointer;
transition: background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
position: relative;
overflow: hidden;
}
.prod-tile::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--apple-blue, #007AFF);
opacity: 0;
transition: opacity 0.2s;
}
.prod-tile:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
border-color: var(--line-strong);
}
.prod-tile:active {
transform: translateY(-1px) scale(0.98);
}
/* 紧迫度色边 */
.prod-tile.urg-overdue::before { background: #FF3B30; opacity: 1; }
.prod-tile.urg-today::before { background: #FF3B30; opacity: 1; }
.prod-tile.urg-danger::before { background: #FF3B30; opacity: 1; }
.prod-tile.urg-warn::before { background: #FF9500; opacity: 1; }
.prod-tile.urg-ok::before { background: #34C759; opacity: 1; }
.prod-tile.urg-done::before { background: #8E8E93; opacity: 1; }
.prod-tile.urg-overdue { background: rgba(255, 59, 48, 0.04); }
.prod-tile.urg-today { background: rgba(255, 59, 48, 0.06); }
.prod-tile.urg-done { opacity: 0.72; background: var(--bg-sunken); }
/* 缩略图叠层 (4 宫格) */
.prod-tile-thumbs {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 4px;
aspect-ratio: 1.4 / 1;
border-radius: 10px;
overflow: hidden;
background: var(--bg-sunken);
}
.prod-tile-thumbs:has(.prod-tile-thumb:nth-child(1):last-child) {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.prod-tile-thumb {
background: var(--bg-sunken);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.prod-tile-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.prod-tile-thumb-empty {
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--ink-mute);
}
.prod-tile-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.prod-tile-date {
font-family: var(--font-serif, serif);
font-style: italic;
font-size: 16px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.005em;
}
.prod-tile-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.prod-tile-count {
font-family: var(--font-mono, monospace);
font-size: 11px;
font-weight: 600;
color: var(--ink-mute);
letter-spacing: 0.04em;
background: var(--bg-sunken);
padding: 3px 9px;
border-radius: 8px;
}
.prod-tile-countdown {
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: -0.005em;
}
.prod-tile.urg-overdue .prod-tile-countdown,
.prod-tile.urg-today .prod-tile-countdown,
.prod-tile.urg-danger .prod-tile-countdown { color: #FF3B30; }
.prod-tile.urg-warn .prod-tile-countdown { color: #B25400; }
.prod-tile.urg-ok .prod-tile-countdown { color: #248A3D; }
.prod-tile.urg-done .prod-tile-countdown { color: var(--ink-mute); }
/* ============================================================
日期文件夹弹窗 (图 2 风格)
============================================================ */
.prod-folder-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.40);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
z-index: var(--z-modal-backdrop);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
padding: 20px;
}
.prod-folder-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.prod-folder {
background: rgba(252, 252, 254, 0.94);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border: 1px solid var(--apple-blue, #007AFF);
border-radius: 22px;
width: 100%;
max-width: 460px;
max-height: 80vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow:
0 24px 64px rgba(0, 0, 0, 0.20),
0 0 0 1px rgba(0, 122, 255, 0.20);
z-index: var(--z-modal);
transform: scale(0.92) translateY(8px);
opacity: 0;
transition:
transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.24s ease;
}
.prod-folder-backdrop.open .prod-folder {
transform: scale(1) translateY(0);
opacity: 1;
}
.prod-folder-header {
padding: 18px 18px 14px;
border-bottom: 1px solid var(--line);
flex-shrink: 0;
}
.prod-folder-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.prod-folder-date {
font-family: var(--font-serif, serif);
font-style: italic;
font-size: 22px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
margin: 0;
flex: 1;
min-width: 0;
}
.prod-folder-close {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.06);
color: var(--ink-soft);
cursor: pointer;
font-size: 18px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
flex-shrink: 0;
line-height: 1;
}
.prod-folder-close:hover {
background: rgba(0, 0, 0, 0.10);
color: var(--ink);
transform: scale(1.05);
}
.prod-folder-close:active { transform: scale(0.94); }
.prod-folder-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
font-family: var(--font-mono, monospace);
font-size: 11px;
letter-spacing: 0.04em;
}
.prod-folder-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.prod-folder-dot.dot-today,
.prod-folder-dot.dot-danger { background: #FF3B30; }
.prod-folder-dot.dot-warn { background: #FF9500; }
.prod-folder-dot.dot-ok { background: #34C759; }
.prod-folder-dot.dot-none { background: #8E8E93; }
.prod-folder-countdown {
font-weight: 600;
color: var(--apple-blue, #007AFF);
}
.prod-folder-sep { color: var(--ink-mute); }
.prod-folder-count {
color: var(--apple-blue, #007AFF);
font-weight: 600;
}
/* 列表区域：高度限制 ≈ 4 个卡片 */
.prod-folder-list {
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
/* 4 张卡 ~110px each + gaps + padding */
max-height: calc(110px * 4 + 8px * 3 + 24px);
flex: 1;
}
/* 苹果风半透明悬浮滚动条 */
.custom-scroll::-webkit-scrollbar {
width: 10px;
}
.custom-scroll::-webkit-scrollbar-track {
background: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.18);
border-radius: 8px;
border: 2px solid transparent;
background-clip: padding-box;
transition: background-color 0.2s;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.32);
background-clip: padding-box;
border: 2px solid transparent;
}
.custom-scroll {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.20) transparent;
}
/* 文件夹里 PO 卡片行 */
.prod-folder-row {
display: flex;
gap: 12px;
padding: 11px 12px;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 12px;
cursor: pointer;
transition: background-color 0.16s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.16s cubic-bezier(0.4, 0, 0.2, 1), color 0.16s cubic-bezier(0.4, 0, 0.2, 1), transform 0.16s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.16s cubic-bezier(0.4, 0, 0.2, 1);
align-items: center;
}
.prod-folder-row:hover {
border-color: var(--apple-blue, #007AFF);
background: rgba(0, 122, 255, 0.04);
transform: translateX(2px);
}
.prod-folder-row:active {
transform: translateX(1px) scale(0.99);
}
.prod-folder-row-thumb {
width: 56px;
height: 72px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
background: var(--bg-sunken);
}
.prod-folder-row-thumb-empty {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono, monospace);
font-size: 13px;
color: var(--ink-mute);
}
.prod-folder-row-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.prod-folder-row-line1 {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.prod-folder-row-po {
font-family: var(--font-mono, monospace);
font-size: 13.5px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.02em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
}
.prod-folder-row-line2 {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--ink-mute);
}
.prod-folder-row-sku {
font-weight: 600;
color: var(--ink-soft);
}
.prod-folder-row-color {
color: var(--ink-mute);
}
.prod-folder-row-line3 {
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 500;
color: var(--ink-soft);
margin-top: 2px;
letter-spacing: -0.005em;
}
.prod-folder-row-line3.danger {
color: #FF3B30;
font-weight: 600;
}
.prod-folder-row-line3.warn {
color: #B25400;
font-weight: 600;
}
/* ============================================================
异常报警铃铛
============================================================ */
.alert-bell {
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.04);
border: 1px solid var(--line);
color: var(--ink-soft);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.16s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.16s cubic-bezier(0.4, 0, 0.2, 1), color 0.16s cubic-bezier(0.4, 0, 0.2, 1), transform 0.16s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.16s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
margin-left: 4px;
}
.alert-bell:hover {
background: rgba(0, 0, 0, 0.08);
color: var(--ink);
transform: scale(1.04);
}
.alert-bell:active { transform: scale(0.94); }
/* 有异常时铃铛轻微抖动 */
.alert-bell.has-alerts {
color: #FF3B30;
animation: bell-shake 1.6s ease-in-out infinite;
animation-delay: 1s;
}
@keyframes bell-shake {
0%, 88%, 100% { transform: rotate(0); }
90%, 94%, 98% { transform: rotate(-9deg); }
92%, 96% { transform: rotate(9deg); }
}
.alert-bell-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: #FF3B30;
color: white;
font-family: var(--font-mono, monospace);
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--bg-elevated);
letter-spacing: 0.02em;
}
/* 异常下拉面板 */
.alert-panel {
position: fixed;
top: 64px;
right: 24px;
width: 380px;
max-width: 92vw;
max-height: 70vh;
background: rgba(252, 252, 254, 0.96);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.16),
0 4px 12px rgba(0, 0, 0, 0.06);
z-index: var(--z-dropdown);
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
transform: translateY(-8px) scale(0.96);
transition:
opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.alert-panel.open {
opacity: 1;
transform: translateY(0) scale(1);
}
.alert-panel-header {
padding: 14px 18px 10px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
}
.alert-panel-header h3 {
font-family: var(--font-serif, serif);
font-style: italic;
font-size: 16px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
margin: 0;
}
.alert-panel-sub {
font-family: var(--font-mono, monospace);
font-size: 10.5px;
letter-spacing: 0.04em;
color: var(--ink-mute);
font-weight: 600;
}
.alert-panel-body {
flex: 1;
overflow-y: auto;
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.alert-section {
margin-bottom: 4px;
}
.alert-section-header {
padding: 6px 10px 4px;
display: flex;
align-items: center;
gap: 6px;
}
.alert-section-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.alert-section.danger .alert-section-dot { background: #FF3B30; }
.alert-section.warn .alert-section-dot { background: #FF9500; }
.alert-section.overdue .alert-section-dot { background: #B22222; }
.alert-section-title {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
color: var(--ink-soft);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.alert-section-count {
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--ink-mute);
margin-left: auto;
font-weight: 600;
}
.alert-row {
display: flex;
gap: 10px;
padding: 9px 10px;
background: var(--bg-elevated);
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.14s, border-color 0.14s, color 0.14s, transform 0.14s, opacity 0.14s, box-shadow 0.14s;
align-items: center;
}
.alert-row:hover {
border-color: var(--apple-blue);
background: rgba(0, 122, 255, 0.04);
transform: translateX(2px);
}
.alert-row-thumb {
width: 36px;
height: 44px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
background: var(--bg-sunken);
}
.alert-row-thumb-empty {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--ink-mute);
}
.alert-row-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.alert-row-title {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono, monospace);
font-size: 12px;
font-weight: 700;
color: var(--ink);
}
.alert-row-status {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
color: var(--ink-soft);
}
.alert-row-status.danger { color: #FF3B30; font-weight: 600; }
.alert-row-status.warn { color: #B25400; font-weight: 600; }
.alert-panel-empty {
padding: 32px 16px;
text-align: center;
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink-mute);
}
.alert-panel-empty .icon {
font-size: 28px;
margin-bottom: 8px;
display: block;
}
.alert-panel-footer {
padding: 8px 16px;
border-top: 1px solid var(--line);
text-align: center;
}
.alert-panel-tip {
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.04em;
}
/* ============================================================
行 Checkbox（列表/平铺通用）
============================================================ */
.batch-checkbox {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 6px;
border: 1.5px solid var(--line-strong);
background: var(--bg-elevated);
cursor: pointer;
position: relative;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
flex-shrink: 0;
}
.batch-checkbox:hover {
border-color: var(--apple-blue);
}
.batch-checkbox:checked {
background: var(--apple-blue);
border-color: var(--apple-blue);
}
.batch-checkbox:checked::after {
content: '';
position: absolute;
top: 3px;
left: 5px;
width: 5px;
height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* 列表行选中态 */
.style-card.batch-selected {
background: rgba(0, 122, 255, 0.06) !important;
box-shadow: inset 3px 0 0 var(--apple-blue) !important;
}
.grid-card.batch-selected {
border-color: var(--apple-blue) !important;
box-shadow: inset 4px 0 0 var(--apple-blue), 0 0 0 2px rgba(0, 122, 255, 0.18) !important;
}
/* row prefix checkbox 容器（首列） */
.batch-checkbox-cell {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
flex-shrink: 0;
}
/* ============================================================
底部批量操作栏（浮起来）
============================================================ */
.batch-bar {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: rgba(28, 28, 30, 0.92);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 14px;
padding: 8px 12px;
z-index: var(--z-toast);
display: flex;
align-items: center;
gap: 12px;
min-width: 380px;
max-width: 92vw;
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.32),
0 4px 14px rgba(0, 0, 0, 0.18);
opacity: 0;
transition:
opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
}
.batch-bar.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.batch-bar-left {
display: flex;
align-items: baseline;
gap: 6px;
padding-right: 14px;
border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.batch-bar-count {
font-family: var(--font-mono, monospace);
font-size: 18px;
font-weight: 700;
color: white;
letter-spacing: 0.02em;
}
.batch-bar-label {
font-family: var(--font-sans);
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
letter-spacing: -0.005em;
}
.batch-bar-scope {
font-family: var(--font-sans);
font-size: 11.5px;
color: rgba(255, 255, 255, 0.58);
white-space: nowrap;
}
.batch-bar-actions {
display: flex;
align-items: center;
gap: 6px;
}
.batch-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.08);
color: white;
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
letter-spacing: -0.005em;
}
.batch-btn:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.24);
transform: translateY(-1px);
}
.batch-btn:active { transform: translateY(0); }
.batch-btn-primary {
background: var(--apple-blue, #007AFF);
border-color: var(--apple-blue, #007AFF);
font-weight: 600;
}
.batch-btn-primary:hover {
background: #0066d6;
border-color: #0066d6;
}
.batch-btn-cancel {
background: transparent;
border: 1px solid transparent;
color: rgba(255, 255, 255, 0.65);
}
.batch-btn-cancel:hover {
background: rgba(255, 59, 48, 0.18);
color: #FF6B61;
}
/* 异常铃铛在 controlsBar 里居中（不被 flex push 走） */
#controlsBar {
align-items: center;
}
.erp-filter-status {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: -6px 22px 12px;
padding: 8px 10px;
border: 1px solid var(--line-soft);
border-radius: 10px;
background: #fff;
color: var(--ink-mute);
font-size: 12px;
}
.erp-filter-status-main {
color: var(--ink);
font-weight: 650;
}
.erp-filter-status-selected {
color: var(--apple-blue);
font-weight: 650;
}
.erp-filter-chip {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 8px;
border-radius: 999px;
background: var(--bg-soft);
border: 1px solid var(--line-soft);
color: var(--ink-mute);
font-weight: 600;
}
.erp-filter-muted {
color: var(--ink-soft);
}
/* 移动端铃铛面板自适应 */
@media (max-width: 600px) {
.alert-panel {
right: 12px;
left: 12px;
width: auto;
}
.batch-bar {
bottom: 16px;
min-width: auto;
width: calc(100% - 24px);
padding: 10px 12px;
}
.erp-filter-status {
margin: -4px 12px 10px;
}
}
/* === 批量补字段弹窗 === */
.bf-modal { display: flex; flex-direction: column; gap: 14px; }
.bf-modal-meta {
display: flex; align-items: center; gap: 8px;
font-size: 12.5px; color: var(--ink-soft);
}
.bf-modal-meta strong { color: var(--ink); font-weight: 600; }
.bf-modal-meta-chip {
display: inline-flex; align-items: center;
background: var(--bg-sunken);
border: 1px solid var(--line);
border-radius: 999px;
padding: 2px 10px;
font-size: 12px; font-weight: 500;
color: var(--ink);
}
.bf-section-label {
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0 2px;
margin-top: 4px;
}
.bf-fields {
display: flex;
flex-direction: column;
background: var(--bg-sunken);
border-radius: 10px;
padding: 2px 0;
border: 1px solid var(--line);
}
.bf-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
opacity: 0.55;
transition: opacity 0.15s, background 0.15s;
border-radius: 7px;
margin: 1px 2px;
}
.bf-row.bf-row-active {
opacity: 1;
background: var(--bg-elevated);
}
.bf-row + .bf-row {
border-top: 1px solid var(--line);
}
.bf-row.bf-row-active + .bf-row,
.bf-row + .bf-row.bf-row-active {
border-top-color: transparent;
}
.bf-row-label {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 96px;
font-size: 13px;
cursor: pointer;
user-select: none;
color: var(--ink);
}
.bf-row-toggle { margin: 0; cursor: pointer; }
.bf-row-control { flex: 1; min-width: 0; }
.bf-row-control select,
.bf-row-control input[type="text"] {
width: 100%;
font-size: 13px;
padding: 6px 10px;
border-radius: 6px;
border: 1px solid var(--line);
background: var(--bg-elevated);
color: var(--ink);
font-family: var(--font-sans);
transition: border-color 0.15s;
}
.bf-row-control select:focus,
.bf-row-control input[type="text"]:focus {
outline: none;
border-color: var(--apple-blue, #007AFF);
}
.bf-row-control select:disabled,
.bf-row-control input:disabled { color: var(--ink-mute); cursor: not-allowed; opacity: 0.65; }
.bf-radio-group { display: flex; gap: 14px; align-items: center; padding: 4px 0; }
.bf-radio-group label {
display: flex; align-items: center; gap: 5px;
font-size: 13px; cursor: pointer;
}
.bf-radio-group input:disabled + * { color: var(--ink-mute); }
/* 行内 checkbox 浮在最左侧，hover 或选中时显示 */
.style-row, .grid-card {
position: relative;
}
.row-batch-checkbox {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
opacity: 0;
transition: opacity 0.18s;
}
.style-row:hover .row-batch-checkbox,
.row-batch-checkbox:checked,
body.batch-mode .row-batch-checkbox {
opacity: 1;
}
/* 选中时 thumb 缩进让出空间 */
.style-row.batch-selected .thumb,
.style-row.batch-selected .thumb-placeholder {
margin-left: 22px;
}
body.batch-mode .style-row .thumb,
body.batch-mode .style-row .thumb-placeholder {
margin-left: 22px;
transition: margin-left 0.2s;
}
/* grid 卡片的 checkbox 浮在右上角 */
.grid-batch-checkbox {
position: absolute;
top: 8px;
right: 8px;
z-index: 3;
opacity: 0;
transition: opacity 0.18s;
}
.grid-card:hover .grid-batch-checkbox,
.grid-batch-checkbox:checked,
body.batch-mode .grid-batch-checkbox {
opacity: 1;
}
/* today 卡片的 checkbox（左侧浮动）*/
.today-card { position: relative; }
.today-batch-checkbox {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
opacity: 0;
transition: opacity 0.18s;
}
.today-card:hover .today-batch-checkbox,
.today-batch-checkbox:checked,
body.batch-mode .today-batch-checkbox {
opacity: 1;
}
body.batch-mode .today-card .thumb-mini,
body.batch-mode .today-card .thumb-mini-placeholder {
margin-left: 22px;
transition: margin-left 0.2s;
}
.today-card.batch-selected {
background: rgba(0, 122, 255, 0.06) !important;
box-shadow: inset 4px 0 0 var(--apple-blue) !important;
}
.today-card.batch-selected .thumb-mini,
.today-card.batch-selected .thumb-mini-placeholder {
margin-left: 22px;
}
.today-card.search-selected-kept {
order: -1;
background: #F5FAFF !important;
border-color: rgba(0, 122, 255, 0.35) !important;
}
.today-card.search-selected-kept::after {
content: "已选保留";
position: absolute;
right: 10px;
top: 8px;
padding: 3px 8px;
border-radius: 6px;
background: rgba(0, 122, 255, 0.10);
color: var(--apple-blue);
font-size: 11px;
font-weight: 700;
pointer-events: none;
}
.batch-btn-danger {
background: rgba(255, 59, 48, 0.18);
border-color: rgba(255, 59, 48, 0.30);
color: #FF6B61;
}
.batch-btn-danger:hover {
background: rgba(255, 59, 48, 0.28);
border-color: rgba(255, 59, 48, 0.45);
color: #FF8076;
}
.batch-btn-export {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.92);
}
.batch-btn-export:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.30);
color: white;
}
/* 全局浮动铃铛 - 永远显示在右上角 */
.alert-bell-floating {
position: fixed;
top: 16px;
right: 24px;
z-index: var(--z-sticky);
background: var(--bg);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border: 1px solid var(--line);
}
.alert-bell-floating:hover {
background: white;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}
@media (max-width: 600px) {
.alert-bell-floating {
top: 12px;
right: 12px;
}
}
.alert-row {
display: flex;
align-items: center;
gap: 4px;
padding: 4px;
border-radius: 8px;
transition: background-color 0.14s, border-color 0.14s, color 0.14s, transform 0.14s, opacity 0.14s, box-shadow 0.14s;
}
.alert-row:hover {
background: rgba(0, 122, 255, 0.04);
}
.alert-row-clickable {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
}
.alert-row-mute {
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--ink-mute);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.14s, border-color 0.14s, color 0.14s, transform 0.14s, opacity 0.14s, box-shadow 0.14s;
flex-shrink: 0;
}
.alert-row-mute:hover {
background: rgba(0, 122, 255, 0.10);
color: var(--apple-blue);
}
.alert-row-mute:active { transform: scale(0.92); }
.alert-row-done { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border: none; background: transparent; color: var(--ink-mute); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.12s, opacity 0.12s, box-shadow 0.12s; }
.alert-row-done:hover { background: var(--ok-bg); color: var(--ok); }
.alert-row-done:active { transform: scale(0.92); }
/* 面板 footer 调整 */
.alert-panel-footer {
padding: 10px 16px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.alert-panel-tip {
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.04em;
flex: 1;
}
.alert-mute-all-btn {
border: none;
background: rgba(0, 122, 255, 0.10);
color: var(--apple-blue);
padding: 5px 12px;
border-radius: 7px;
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.14s, border-color 0.14s, color 0.14s, transform 0.14s, opacity 0.14s, box-shadow 0.14s;
letter-spacing: -0.005em;
white-space: nowrap;
}
.alert-mute-all-btn:hover {
background: var(--apple-blue);
color: white;
}
/* 全局浮动工具区 */
.global-tools {
position: fixed;
top: 16px;
right: 24px;
z-index: var(--z-sticky);
display: flex;
align-items: center;
gap: 8px;
}
.alert-bell.alert-bell-floating {
position: relative;
top: auto;
right: auto;
}
/* 批量开关按钮 */
.batch-toggle-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--line);
color: var(--ink-soft);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.16s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.16s cubic-bezier(0.4, 0, 0.2, 1), color 0.16s cubic-bezier(0.4, 0, 0.2, 1), transform 0.16s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.16s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.batch-toggle-btn:hover {
background: white;
color: var(--ink);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
transform: scale(1.04);
}
.batch-toggle-btn:active { transform: scale(0.94); }
/* 批量模式激活状态 */
.batch-toggle-btn.active {
background: var(--apple-blue, #007AFF);
border-color: var(--apple-blue, #007AFF);
color: white;
box-shadow: 0 4px 14px rgba(0, 122, 255, 0.32);
}
.batch-toggle-btn.active:hover {
background: #0066d6;
}
/* 浮动工具区（铃铛 + 批量按钮）*/
.floating-tools {
position: fixed;
top: 16px;
right: 24px;
z-index: var(--z-sticky);
display: flex;
align-items: center;
gap: 8px;
}
.floating-btn {
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
/* 与 today-search-bar 一致：实色背景，避免滚动时透出下方红边框/阴影卡片 */
background: var(--bg);
border: 1px solid var(--line);
color: var(--ink-soft);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.16s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.16s cubic-bezier(0.4, 0, 0.2, 1), color 0.16s cubic-bezier(0.4, 0, 0.2, 1), transform 0.16s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.16s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.floating-btn:hover {
background: white;
color: var(--ink);
transform: scale(1.04);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}
.floating-btn:active { transform: scale(0.94); }
/* 批量模式开启时按钮高亮 */
.batch-toggle-btn.active {
background: var(--apple-blue, #007AFF);
color: white;
border-color: var(--apple-blue, #007AFF);
box-shadow: 0 4px 14px rgba(0, 122, 255, 0.34);
}
.batch-toggle-btn.active:hover {
background: #0066d6;
color: white;
}
/* 老的 alert-bell-floating 样式做兼容（继承新的 floating-btn 样式）*/
.alert-bell.floating-btn { /* 沿用 .alert-bell 内已有的 has-alerts 等行为 */ }
/* 调整：移除老的 alert-bell-floating 类的样式（避免冲突）*/
.alert-bell-floating {
position: static !important;
top: auto !important;
right: auto !important;
}
@media (max-width: 600px) {
.floating-tools {
top: 12px;
right: 12px;
}
}
/* ============================================================
大货平铺 - iOS 日历卡片风 (cal-tile)
============================================================ */
.cal-tile {
padding: 0 !important;
overflow: hidden;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 14px;
cursor: pointer;
transition: background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
position: relative;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
min-height: 200px;
}
.cal-tile:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}
.cal-tile:active {
transform: translateY(-1px) scale(0.98);
}
/* 顶部红色条（iOS 日历的标志性元素）*/
.cal-tile::before {
content: '';
display: block;
height: 28px;
width: 100%;
flex-shrink: 0;
background: linear-gradient(180deg, #FF453A, #E63B30);
}
.cal-tile.urg-warn::before { background: linear-gradient(180deg, #FF9F0A, #E68A00); }
.cal-tile.urg-ok::before { background: linear-gradient(180deg, #34C759, #2BA84A); }
.cal-tile.urg-overdue::before { background: linear-gradient(180deg, #8E0000, #5C0000); }
.cal-tile.urg-done::before { background: linear-gradient(180deg, #8E8E93, #636366); }
.cal-tile.no-date::before { background: linear-gradient(180deg, #C7C7CC, #AEAEB2); }
/* 顶部条上的月份字样 */
.cal-tile-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 28px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px;
z-index: 1;
pointer-events: none;
}
.cal-tile-month {
color: rgba(255, 255, 255, 0.95);
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cal-tile-countdown {
color: white;
font-family: var(--font-sans);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.02em;
background: rgba(255, 255, 255, 0.18);
padding: 2px 8px;
border-radius: 10px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* 大日期数字 */
.cal-tile-day {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif, 'Source Han Serif', Georgia, serif);
font-size: 76px;
font-weight: 300;
color: var(--ink);
line-height: 0.9;
letter-spacing: -0.04em;
padding: 14px 0 4px;
}
.cal-tile.urg-overdue .cal-tile-day,
.cal-tile.urg-today .cal-tile-day,
.cal-tile.urg-danger .cal-tile-day { color: #C73428; }
.cal-tile.urg-warn .cal-tile-day { color: #B25400; }
.cal-tile.urg-done .cal-tile-day,
.cal-tile.no-date .cal-tile-day { color: var(--ink-mute); }
/* 周几标签 */
.cal-tile-weekday {
text-align: center;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--ink-soft);
letter-spacing: -0.005em;
padding: 0 12px 12px;
}
.cal-tile.urg-overdue .cal-tile-weekday,
.cal-tile.urg-today .cal-tile-weekday,
.cal-tile.urg-danger .cal-tile-weekday { color: #C73428; font-weight: 600; }
/* 底部 PO 数 */
.cal-tile-footer {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 12px 12px;
border-top: 1px dashed var(--line);
margin: 0 12px;
}
.cal-tile-po-count {
font-family: var(--font-mono, monospace);
font-size: 11.5px;
color: var(--ink-soft);
font-weight: 600;
letter-spacing: 0.02em;
}
/* 已批船版的卡片暗淡处理 */
.cal-tile.urg-done {
opacity: 0.65;
}
/* 网格调整：日历卡片更小一些更密 */
.prod-month-panel { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 12px; background: var(--bg-elevated); }
.prod-month-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; user-select: none; transition: background 0.12s; }
.prod-month-header:hover { background: var(--bg-sunken); }
.prod-month-label { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink); }
.prod-month-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); background: var(--bg-sunken); padding: 2px 8px; border-radius: 10px; }
.prod-month-chevron { font-size: 11px; color: var(--ink-mute); transition: transform 0.2s; margin-left: auto; }
.prod-month-panel.open .prod-month-chevron { transform: rotate(180deg); }
.prod-month-body { display: none; padding: 0 16px 16px; }
.prod-month-panel.open .prod-month-body { display: block; }
.prod-grid-wrapper {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
gap: 14px !important;
}
/* 修订之前隐藏老 prod-tile 部件相关 */
.cal-tile .prod-tile-thumbs,
.cal-tile .prod-tile-meta {
display: none !important;
}
/* ============================================================
大货日期文件夹 - 横向网格版（4 个一排）
============================================================ */
.prod-folder-wide {
max-width: 1080px !important;
width: 94vw;
max-height: 82vh;
}
.prod-folder-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
padding: 16px;
overflow-y: auto;
flex: 1;
align-content: start;
}
@media (max-width: 1100px) {
.prod-folder-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
.prod-folder-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.prod-folder-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.prod-folder-grid { grid-template-columns: 1fr; }
}
/* PO 卡片（横向网格里的小方块）*/
.prod-folder-card {
position: relative;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px;
cursor: pointer;
transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
gap: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.prod-folder-card:hover {
transform: translateY(-2px);
border-color: var(--apple-blue, #007AFF);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}
.prod-folder-card:active { transform: translateY(0) scale(0.98); }
.prod-folder-card.po-selected {
border-color: var(--apple-blue, #007AFF);
background: rgba(0, 122, 255, 0.06);
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.20);
}
.prod-folder-card-thumb {
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 8px;
object-fit: cover;
background: var(--bg-sunken);
display: block;
}
.prod-folder-card-thumb-empty {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--ink-mute);
}
.prod-folder-card-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.prod-folder-card-line1 {
display: flex;
align-items: center;
gap: 6px;
}
.prod-folder-card-po {
font-family: var(--font-mono, monospace);
font-size: 12px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.02em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.prod-folder-card-line2 {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.prod-folder-card-color {
font-family: var(--font-mono, monospace);
font-size: 10.5px;
color: var(--ink-mute);
font-weight: 500;
}
.prod-folder-card-line3 {
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--ink-soft);
font-weight: 600;
background: var(--bg-sunken);
padding: 2px 6px;
border-radius: 4px;
align-self: flex-start;
}
.prod-folder-card-node {
font-family: var(--font-sans);
font-size: 11px;
color: var(--ink-soft);
font-weight: 500;
margin-top: 2px;
padding-top: 6px;
border-top: 1px solid var(--line);
}
.prod-folder-card-node.danger { color: #FF3B30; font-weight: 600; }
.prod-folder-card-node.warn { color: #B25400; font-weight: 600; }
/* 卡片右上角 checkbox */
.folder-card-checkbox {
position: absolute;
top: 8px;
right: 8px;
z-index: 3;
opacity: 0;
transition: opacity 0.18s;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.prod-folder-card:hover .folder-card-checkbox,
.folder-card-checkbox:checked,
body.batch-mode-locked .folder-card-checkbox {
opacity: 1;
}
/* 头部"批量删除"按钮 hover 美化 */
#batchDeletePoBtn {
background: rgba(255, 59, 48, 0.18);
border-color: rgba(255, 59, 48, 0.30);
color: #FF6B61;
}
#batchDeletePoBtn:hover {
background: rgba(255, 59, 48, 0.28);
border-color: rgba(255, 59, 48, 0.45);
color: #FF8076;
}
/* ============================================================
大货列表 - 按日期组批量
============================================================ */
/* 组 header 上的"批量"小按钮 */
.group-batch-btn {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: auto;
padding: 4px 10px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.6);
color: var(--ink-soft);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
letter-spacing: -0.005em;
}
.group-batch-btn:hover {
border-color: var(--apple-blue, #007AFF);
color: var(--apple-blue, #007AFF);
background: white;
}
.group-batch-btn:active { transform: scale(0.94); }
/* 当前组激活时按钮变蓝 */
.production-group.group-batch-active .group-batch-btn {
background: var(--apple-blue, #007AFF);
color: white;
border-color: var(--apple-blue, #007AFF);
box-shadow: 0 2px 6px rgba(0, 122, 255, 0.30);
}
/* 当前激活的组：边框微微高亮 */
.production-group.group-batch-active {
outline: 2px solid rgba(0, 122, 255, 0.18);
outline-offset: -1px;
border-radius: 12px;
transition: outline 0.2s;
}
/* 非激活组在 group-batch-mode 下变暗（视觉锁定）*/
body.group-batch-mode .production-group:not(.group-batch-active) {
opacity: 0.5;
pointer-events: none;
transition: opacity 0.18s;
}
/* prod-row 上的 checkbox：仍占 grid 第 1 格,但默认隐藏(只占空间) */
.production-row { position: relative; }
.prod-row-checkbox {
/* 不再 position:absolute,保留为 grid item,这样行的 11 个 items 跟表头 11 列对齐 */
opacity: 0;
transition: opacity 0.18s;
justify-self: center;
cursor: pointer;
}
.production-row:hover .prod-row-checkbox,
.prod-row-checkbox:checked {
opacity: 1;
}
/* 仅在激活组里 checkbox 默认显示 */
.production-group.group-batch-active .prod-row-checkbox {
opacity: 1;
}
/* 选中态高亮 */
.production-row.po-selected {
background: rgba(0, 122, 255, 0.06) !important;
box-shadow: inset 4px 0 0 var(--apple-blue, #007AFF) !important;
}
/* ============================================================
POLISH PASS — 阶梯式渐入 + 微纹理 + 间距/字重精修
============================================================ */
/* 主区域微纹理：暖白基底 + 轻微噪点 + 顶部浅渐变 */
main#main {
background-image:
radial-gradient(ellipse at top, rgba(252, 248, 240, 0.45) 0%, transparent 60%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-attachment: fixed;
}
/* 阶梯渐入 keyframe */
@keyframes stagger-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* 列表/卡片项进入时：依次浮现（每张延迟 30ms）*/
.style-row, .grid-card, .today-card,
.production-row, .prod-tile,
.alert-row, .prod-folder-card,
.archive-row {
animation: stagger-fade-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
/* 用 nth-child 给每张错开延迟 — 最多 24 张，再多就用同一个延迟 */
.style-row:nth-child(n+1) { animation-delay: 0ms; }
.style-row:nth-child(n+2) { animation-delay: 24ms; }
.style-row:nth-child(n+3) { animation-delay: 48ms; }
.style-row:nth-child(n+4) { animation-delay: 72ms; }
.style-row:nth-child(n+5) { animation-delay: 96ms; }
.style-row:nth-child(n+6) { animation-delay: 120ms; }
.style-row:nth-child(n+7) { animation-delay: 144ms; }
.style-row:nth-child(n+8) { animation-delay: 168ms; }
.style-row:nth-child(n+9) { animation-delay: 192ms; }
.style-row:nth-child(n+10) { animation-delay: 216ms; }
.style-row:nth-child(n+11) { animation-delay: 240ms; }
.style-row:nth-child(n+12) { animation-delay: 264ms; }
/* grid-card 网格也同样错开 */
.grid-card:nth-child(n+1) { animation-delay: 0ms; }
.grid-card:nth-child(n+2) { animation-delay: 32ms; }
.grid-card:nth-child(n+3) { animation-delay: 64ms; }
.grid-card:nth-child(n+4) { animation-delay: 96ms; }
.grid-card:nth-child(n+5) { animation-delay: 128ms; }
.grid-card:nth-child(n+6) { animation-delay: 160ms; }
.grid-card:nth-child(n+7) { animation-delay: 192ms; }
.grid-card:nth-child(n+8) { animation-delay: 224ms; }
/* 平铺日历方块的渐入 */
.prod-tile:nth-child(n+1) { animation-delay: 0ms; }
.prod-tile:nth-child(n+2) { animation-delay: 28ms; }
.prod-tile:nth-child(n+3) { animation-delay: 56ms; }
.prod-tile:nth-child(n+4) { animation-delay: 84ms; }
.prod-tile:nth-child(n+5) { animation-delay: 112ms; }
.prod-tile:nth-child(n+6) { animation-delay: 140ms; }
.prod-tile:nth-child(n+7) { animation-delay: 168ms; }
.prod-tile:nth-child(n+8) { animation-delay: 196ms; }
/* today 卡片渐入 */
.today-card:nth-child(n+1) { animation-delay: 0ms; }
.today-card:nth-child(n+2) { animation-delay: 32ms; }
.today-card:nth-child(n+3) { animation-delay: 64ms; }
.today-card:nth-child(n+4) { animation-delay: 96ms; }
.today-card:nth-child(n+5) { animation-delay: 128ms; }
/* 文件夹弹窗里的 PO 卡片：开壳后阶梯浮现 */
.prod-folder-card { animation: stagger-fade-in 0.36s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.prod-folder-card:nth-child(n+1) { animation-delay: 60ms; }
.prod-folder-card:nth-child(n+2) { animation-delay: 92ms; }
.prod-folder-card:nth-child(n+3) { animation-delay: 124ms; }
.prod-folder-card:nth-child(n+4) { animation-delay: 156ms; }
.prod-folder-card:nth-child(n+5) { animation-delay: 188ms; }
.prod-folder-card:nth-child(n+6) { animation-delay: 220ms; }
.prod-folder-card:nth-child(n+7) { animation-delay: 252ms; }
.prod-folder-card:nth-child(n+8) { animation-delay: 284ms; }
/* 章节 header 不要被动画影响 */
.production-group-header,
.grid-stage-header,
.today-section h2,
.list-header {
animation: none !important;
}
/* 减少视觉干扰：关闭一直在移动的元素的渐入（铃铛、批量栏自带动画）*/
.alert-bell,
.batch-bar,
.alert-panel,
.toast,
.app-dialog {
animation: none;
}
/* ============================================================
空状态 — 给它们性格
============================================================ */
/* 今日跟进无异常时 — "下午茶时间" */
.today-empty {
text-align: center;
padding: 60px 40px 40px;
max-width: 480px;
margin: 60px auto 0;
position: relative;
}
.today-empty .icon {
display: inline-block;
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, #E3EFE5, #C6E5CD);
color: #2B6A3F;
font-size: 32px;
line-height: 72px;
margin-bottom: 20px;
box-shadow:
0 8px 24px rgba(43, 106, 63, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
animation: empty-icon-bounce 2.4s ease-in-out infinite;
}
@keyframes empty-icon-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.today-empty h3 {
font-family: var(--font-serif, Georgia, serif);
font-style: italic;
font-size: 26px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.015em;
margin: 0 0 8px;
}
.today-empty p {
font-family: var(--font-sans);
font-size: 14px;
color: var(--ink-soft);
line-height: 1.6;
letter-spacing: -0.005em;
margin: 0;
}
.today-empty::after {
content: '所有款式都在正常进度内';
display: block;
margin-top: 22px;
font-family: var(--font-mono, monospace);
font-size: 10.5px;
color: var(--ink-mute);
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.6;
}
/* 通用 .empty 区块（开发追踪、历史档案 等）*/
.empty {
text-align: center;
padding: 56px 32px 40px;
max-width: 480px;
margin: 60px auto 0;
}
.empty h3 {
font-family: var(--font-serif, Georgia, serif);
font-style: italic;
font-size: 22px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
margin: 0 0 6px;
}
.empty p {
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink-soft);
line-height: 1.55;
letter-spacing: -0.005em;
margin: 0;
}
.empty::before {
content: '';
display: block;
width: 56px;
height: 56px;
margin: 0 auto 18px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, rgba(0, 122, 255, 0.18), transparent 60%),
linear-gradient(135deg, #F0EFEC, #E4E3D8);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 4px 12px rgba(0, 0, 0, 0.04);
}
/* 异常面板空状态再美化 */
.alert-panel-empty {
padding: 40px 16px;
text-align: center;
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink-soft);
}
.alert-panel-empty .icon {
font-size: 36px;
margin-bottom: 10px;
display: block;
filter: saturate(0.85);
}
/* ============================================================
字重 / 间距精修
============================================================ */
/* 侧栏：tab 标签更舒服 */
.nav-item {
letter-spacing: -0.005em;
transition: background-color 0.16s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.16s cubic-bezier(0.4, 0, 0.2, 1), color 0.16s cubic-bezier(0.4, 0, 0.2, 1), transform 0.16s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item:hover:not(.active) {
background: rgba(0, 0, 0, 0.025);
}
.nav-item.active {
font-weight: 600;
letter-spacing: -0.008em;
}
/* logo 区域更精致 */
.sidebar-logo {
letter-spacing: -0.015em;
}
.logo-text {
font-weight: 500;
letter-spacing: -0.018em;
}
.sidebar-tag {
letter-spacing: 0.18em;
font-weight: 600;
opacity: 0.5;
}
/* 列表行字间距精修 */
.style-row .sku,
.production-row .sku {
letter-spacing: 0.015em;
font-feature-settings: "tnum" 1; /* 表格数字对齐 */
}
.style-row .name,
.production-row .name {
letter-spacing: -0.005em;
font-weight: 500;
}
/* 客户徽章字重(最终覆盖,前面 3 处定义都被这里赢)*/
.client-badge {
letter-spacing: 0.05em;
font-weight: 600;
}
/* 节点状态文字 */
.node-name {
letter-spacing: -0.005em;
}
/* 抽屉标题区精修 */
.drawer-header {
padding-bottom: 14px;
}
.drawer-title {
letter-spacing: -0.018em;
font-weight: 600;
}
/* 批量栏内的字 — 数字用 tabular nums */
.batch-bar-count {
font-feature-settings: "tnum" 1;
}
/* 月历单元格里的日期数字 */
.cal-cell .day-number,
.cal-cell-header,
.prod-tile-day {
font-feature-settings: "tnum" 1;
}
/* 改善 placeholder 文字外观 */
input::placeholder, textarea::placeholder {
color: var(--ink-mute);
opacity: 0.7;
font-weight: 400;
}
/* ============================================================
滚动条更精致
============================================================ */
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.12);
border-radius: 8px;
border: 2px solid transparent;
background-clip: padding-box;
transition: background-color 0.2s;
}
*::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.24);
background-clip: padding-box;
border: 2px solid transparent;
}
/* ============================================================
减小动效偏好支持（accessibility）
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.today-empty .icon { line-height: 0; padding: 20px; box-sizing: border-box; }
.today-empty .icon svg { display: block; margin: 0 auto; }
/* ============================================================
新增款式表单：一并添加 PO 折叠区
============================================================ */
.new-style-po-section {
margin-top: 18px;
padding-top: 18px;
border-top: 1px dashed var(--line);
}
.new-style-po-toggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
background: rgba(0, 122, 255, 0.04);
border: 1px dashed rgba(0, 122, 255, 0.30);
border-radius: 10px;
padding: 10px 14px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--apple-blue, #007AFF);
cursor: pointer;
transition: background-color 0.16s, border-color 0.16s, color 0.16s, transform 0.16s, opacity 0.16s, box-shadow 0.16s;
letter-spacing: -0.005em;
}
.new-style-po-toggle:hover {
background: rgba(0, 122, 255, 0.08);
border-color: rgba(0, 122, 255, 0.45);
}
.new-style-po-toggle .po-toggle-chevron {
transition: transform 0.2s ease;
flex-shrink: 0;
}
.new-style-po-section.expanded .po-toggle-chevron {
transform: rotate(90deg);
}
.new-style-po-section.expanded .new-style-po-toggle {
background: rgba(0, 122, 255, 0.06);
border-style: solid;
}
.new-style-po-hint {
margin-left: auto;
font-family: var(--font-sans);
font-size: 11px;
color: var(--ink-mute);
font-weight: 500;
letter-spacing: -0.005em;
}
.new-style-po-body {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* 单条 PO 行 */
/* #2: 新建款 多 PO 行 — 卡片式 + 三段分组 */
.new-style-po-row {
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 12px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
margin-bottom: 10px;
}
.new-style-po-row .po-row-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 0;
}
.new-style-po-row .po-row-header > span {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0;
}
.new-style-po-row .po-row-remove {
background: transparent;
border: none;
color: var(--ink-mute);
cursor: pointer;
width: 26px; height: 26px;
border-radius: 6px;
font-size: 18px;
line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
}
.new-style-po-row .po-row-remove:hover {
background: var(--danger-bg);
color: var(--danger);
}
.new-style-po-row .new-po-section { margin: 0; }
.new-style-po-row .new-po-section-title {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 600;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 8px;
}
.new-style-po-row .new-po-section .form-row + .form-row {
margin-top: 10px;
}
.new-style-po-row .new-po-extra {
padding: 0;
}
.new-style-po-row .new-po-advanced-body {
margin-top: 10px;
display: flex; flex-direction: column; gap: 10px;
}
.new-style-po-row .form-row {
margin: 0;
}
.new-style-po-row label {
font-size: 10.5px !important;
letter-spacing: 0.04em !important;
}
.new-style-po-row input,
.new-style-po-row select {
padding: 7px 10px !important;
font-size: 13px !important;
}
.new-style-po-addrow {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 5px;
background: transparent;
border: 1px dashed var(--line-strong);
border-radius: 8px;
padding: 7px 12px;
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 500;
color: var(--ink-soft);
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.new-style-po-addrow:hover {
border-color: var(--apple-blue, #007AFF);
color: var(--apple-blue, #007AFF);
background: rgba(0, 122, 255, 0.04);
}
/* ============================================================
历史档案：恢复按钮 + 优化
============================================================ */
.archive-row {
position: relative;
}
.archive-action-group {
position: absolute;
right: 36px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 6px;
align-items: center;
opacity: 0;
transition: opacity 0.16s ease;
z-index: 2;
}
.archive-row:hover .archive-action-group {
opacity: 1;
}
.archive-restore-btn, .archive-delete-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
border: 1px solid var(--line);
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.16s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.16s cubic-bezier(0.4, 0, 0.2, 1), color 0.16s cubic-bezier(0.4, 0, 0.2, 1), transform 0.16s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.16s cubic-bezier(0.4, 0, 0.2, 1);
letter-spacing: -0.005em;
white-space: nowrap;
}
.archive-restore-btn {
color: var(--apple-blue, #007AFF);
border-color: var(--apple-blue, #007AFF);
}
.archive-restore-btn:hover {
background: var(--apple-blue, #007AFF);
color: white;
transform: scale(1.04);
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.30);
}
.archive-restore-btn:active {
transform: scale(0.96);
}
.archive-delete-btn {
color: #FF3B30;
border-color: #FF3B30;
}
.archive-delete-btn:hover {
background: #FF3B30;
color: white;
transform: scale(1.04);
box-shadow: 0 2px 8px rgba(255, 59, 48, 0.30);
}
.archive-delete-btn:active {
transform: scale(0.96);
}
/* "已完成订单"行不显示恢复按钮（语义不对）— 已经在 JS 里控制了 */
/* ============================================================
归档原因 dialog 样式
============================================================ */
.archive-reason-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.archive-reason-btn {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 12px 10px;
background: var(--bg-sunken);
border: 1.5px solid var(--line);
border-radius: 10px;
cursor: pointer;
transition: background-color 0.16s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.16s cubic-bezier(0.4, 0, 0.2, 1), color 0.16s cubic-bezier(0.4, 0, 0.2, 1), transform 0.16s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.16s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.16s cubic-bezier(0.4, 0, 0.2, 1);
text-align: left;
font-family: var(--font-sans);
}
.archive-reason-btn:hover {
border-color: var(--apple-blue, #007AFF);
background: rgba(0, 122, 255, 0.04);
transform: translateY(-1px);
}
.archive-reason-btn.selected {
border-color: var(--apple-blue, #007AFF);
background: rgba(0, 122, 255, 0.10);
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.15);
}
.archive-reason-btn .reason-icon {
font-size: 18px;
margin-bottom: 2px;
}
.archive-reason-btn .reason-label {
font-size: 13px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.005em;
}
.archive-reason-btn .reason-sub {
font-size: 10.5px;
color: var(--ink-mute);
letter-spacing: -0.005em;
}
.app-dialog-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* ============================================================
历史档案 - 时间分组 + 耗时显示
============================================================ */
.time-group {
margin-bottom: 14px;
}
.time-group:last-child {
margin-bottom: 0;
}
.time-group-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px 8px;
margin-bottom: 4px;
border-bottom: 1px dashed var(--line);
}
.time-group-label {
font-family: var(--font-mono, monospace);
font-size: 11px;
font-weight: 700;
color: var(--ink-soft);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.time-group-count {
font-family: var(--font-mono, monospace);
font-size: 10.5px;
color: var(--ink-mute);
letter-spacing: 0.04em;
background: var(--bg-sunken);
padding: 2px 8px;
border-radius: 8px;
font-weight: 600;
}
/* 耗时高亮 */
.archive-duration {
color: var(--apple-blue, #007AFF) !important;
font-weight: 600 !important;
font-feature-settings: "tnum" 1;
}
/* 归档备注次要颜色 */
.archive-note {
font-style: italic;
opacity: 0.85;
}
/* archive-row 在批量模式下让 checkbox 显示出来 */
.archive-row .row-batch-checkbox {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
opacity: 0;
transition: opacity 0.18s;
}
.archive-row:hover .row-batch-checkbox,
.archive-row .row-batch-checkbox:checked,
body.batch-mode .archive-row .row-batch-checkbox,
body.batch-mode-locked .archive-row .row-batch-checkbox {
opacity: 1;
}
/* 已完成订单：不允许选 → checkbox 不显示 */
.archive-row.archive-row-done .row-batch-checkbox {
display: none;
}
/* archive-row 选中态高亮 */
.archive-row.batch-selected {
background: rgba(0, 122, 255, 0.06) !important;
box-shadow: inset 4px 0 0 var(--apple-blue, #007AFF) !important;
}
/* 批量模式下让缩略图给 checkbox 让位 */
body.batch-mode .archive-row.archive-row-archived .thumb,
body.batch-mode .archive-row.archive-row-archived .thumb-placeholder,
body.batch-mode-locked .archive-row.archive-row-archived .thumb,
body.batch-mode-locked .archive-row.archive-row-archived .thumb-placeholder {
margin-left: 22px;
transition: margin-left 0.2s;
}
/* ============================================================
反单提示条
============================================================ */
/* #3: 反单 banner 从横幅改胶囊,inline 显示 */
.repeat-order-banner {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
background: var(--warn-bg);
border-radius: 999px;
color: var(--warn);
font-size: 12px;
width: fit-content;
max-width: 100%;
}
.repeat-order-banner svg {
flex-shrink: 0;
color: var(--warn);
width: 13px; height: 13px;
}
.repeat-banner-title {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
color: var(--warn);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* ============================================================
过期分级视觉强化
============================================================ */
/* 浅红：过期 1-3 天 */
.prod-tile.urg-overdue-mild::before {
background: linear-gradient(180deg, #FF6B61, #FF3B30) !important;
}
.prod-tile.urg-overdue-mild .cal-tile-day {
color: #C73428 !important;
}
/* 深红：过期 4-7 天 */
.prod-tile.urg-overdue-heavy::before {
background: linear-gradient(180deg, #C73428, #8E0000) !important;
}
.prod-tile.urg-overdue-heavy {
background: linear-gradient(135deg, rgba(255, 59, 48, 0.08), rgba(199, 52, 40, 0.04)) !important;
}
.prod-tile.urg-overdue-heavy .cal-tile-day {
color: #8E0000 !important;
}
.prod-tile.urg-overdue-heavy .cal-tile-countdown {
background: rgba(0, 0, 0, 0.20) !important;
}
/* 严重：过期 8 天+ - 黑红 + 轻微脉冲 */
.prod-tile.urg-overdue-severe::before {
background: linear-gradient(180deg, #5C0000, #2A0000) !important;
height: 36px !important;
}
.prod-tile.urg-overdue-severe {
background: linear-gradient(135deg, rgba(92, 0, 0, 0.10), rgba(255, 59, 48, 0.06)) !important;
border-color: rgba(92, 0, 0, 0.40) !important;
box-shadow: 0 4px 14px rgba(92, 0, 0, 0.16);
animation: severe-pulse 2.4s ease-in-out infinite;
}
@keyframes severe-pulse {
0%, 100% { box-shadow: 0 4px 14px rgba(92, 0, 0, 0.16); }
50% { box-shadow: 0 6px 22px rgba(92, 0, 0, 0.30); }
}
.prod-tile.urg-overdue-severe .cal-tile-day {
color: #5C0000 !important;
text-shadow: 0 1px 2px rgba(92, 0, 0, 0.18);
}
.prod-tile.urg-overdue-severe .cal-tile-countdown {
background: rgba(0, 0, 0, 0.35) !important;
font-weight: 700 !important;
}
.prod-tile.urg-overdue-severe::after {
content: '严重逾期';
position: absolute;
top: 4px;
right: 4px;
background: #5C0000;
color: white;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 8px;
letter-spacing: 0.06em;
z-index: 2;
box-shadow: 0 2px 6px rgba(92, 0, 0, 0.40);
}
/* 大货列表组的过期分级 */
.production-group.date-overdue.severe .production-group-header {
background: linear-gradient(135deg, rgba(92, 0, 0, 0.14), rgba(255, 59, 48, 0.08)) !important;
}
.production-group.date-overdue.severe .date-main {
color: #5C0000 !important;
font-weight: 700 !important;
}
/* 行级过期标识（列表里）*/
.production-row.row-overdue-severe {
background: rgba(92, 0, 0, 0.04) !important;
box-shadow: inset 4px 0 0 #5C0000 !important;
}
.production-row.row-overdue-heavy {
box-shadow: inset 4px 0 0 #8E0000 !important;
}
/* ============================================================
抽屉里 PO 项的过期标识 + 延期处理 + 延期历史
============================================================ */
.po-item-ef-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 4px;
}
.po-overdue-tag {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
background: rgba(255, 59, 48, 0.14);
color: #C73428;
font-family: var(--font-mono, monospace);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: 8px;
}
/* 过期分级行高亮 */
.po-item.po-overdue-mild { border-left: 3px solid #FF6B61; padding-left: 10px; }
.po-item.po-overdue-heavy {
border-left: 3px solid #8E0000;
padding-left: 10px;
background: rgba(255, 59, 48, 0.03);
}
.po-item.po-overdue-severe {
border-left: 3px solid #5C0000;
padding-left: 10px;
background: linear-gradient(90deg, rgba(92, 0, 0, 0.06), transparent);
}
.po-item.po-overdue-severe .po-overdue-tag {
background: #5C0000;
color: white;
}
.po-extend-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: rgba(255, 149, 0, 0.10);
border: 1px solid rgba(255, 149, 0, 0.30);
border-radius: 14px;
color: #B25400;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.16s, border-color 0.16s, color 0.16s, transform 0.16s, opacity 0.16s, box-shadow 0.16s;
letter-spacing: -0.005em;
flex-shrink: 0;
}
.po-extend-btn:hover {
background: #FF9500;
color: white;
border-color: #FF9500;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(255, 149, 0, 0.36);
}
/* 延期历史显示 */
.po-delay-history {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--line);
display: flex;
flex-direction: column;
gap: 4px;
}
.po-delay-entry {
font-family: var(--font-mono, monospace);
font-size: 10.5px;
color: var(--ink-soft);
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.po-delay-entry .delay-arrow {
color: var(--ink-mute);
font-weight: 700;
}
.po-delay-entry .delay-reason {
color: #B25400;
font-weight: 600;
}
.po-delay-entry .delay-note {
color: var(--ink-mute);
font-style: italic;
}
/* ============================================================
首/反单标签 + 紧迫角标 + 特殊备注红条
============================================================ */
/* 首/反单小胶囊 */
.order-type-pill {
display: inline-block;
padding: 1px 7px;
border-radius: 8px;
font-family: var(--font-mono, monospace);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-left: 4px;
vertical-align: middle;
flex-shrink: 0;
}
.order-type-pill.badge-first {
background: rgba(52, 199, 89, 0.14);
color: #248A3D;
}
.order-type-pill.badge-repeat {
background: rgba(175, 82, 222, 0.14);
color: #7C3AB2;
}
.order-type-pill.badge-mixed {
background: rgba(255, 149, 0, 0.14);
color: #B25400;
}
/* 列表行里的紧迫角标（替代隐式色边）*/
.row-urgent-pill {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 10px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: -0.005em;
margin-left: 8px;
flex-shrink: 0;
}
.row-urgent-pill.urgent-mild { background: rgba(255, 59, 48, 0.10); color: #C73428; }
.row-urgent-pill.urgent-heavy { background: rgba(142, 0, 0, 0.14); color: #8E0000; }
.row-urgent-pill.urgent-severe { background: linear-gradient(135deg, #5C0000, #2A0000); color: white; }
.row-urgent-pill.urgent-today { background: rgba(255, 59, 48, 0.16); color: #C73428; }
.row-urgent-pill.urgent-warn { background: rgba(255, 149, 0, 0.14); color: #B25400; }
.row-urgent-pill.urgent-normal { background: rgba(0, 122, 255, 0.10); color: var(--apple-blue, #007AFF); font-weight: 600; }
/* 平铺卡片底部紫色"剩余 X 天"角标（参考你看到的 ERP）*/
.grid-card-urgent-strip {
margin: 8px -14px -14px;
padding: 6px 14px;
text-align: center;
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.02em;
border-radius: 0 0 12px 12px;
}
.grid-card-urgent-strip.urgent-mild { background: rgba(255, 59, 48, 0.10); color: #C73428; }
.grid-card-urgent-strip.urgent-heavy { background: rgba(142, 0, 0, 0.14); color: #8E0000; }
.grid-card-urgent-strip.urgent-severe {
background: linear-gradient(135deg, #5C0000, #2A0000);
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
.grid-card-urgent-strip.urgent-today { background: rgba(255, 59, 48, 0.14); color: #C73428; font-weight: 800; }
.grid-card-urgent-strip.urgent-warn { background: rgba(255, 149, 0, 0.12); color: #B25400; }
.grid-card-urgent-strip.urgent-normal {
background: linear-gradient(135deg, rgba(124, 58, 178, 0.10), rgba(0, 122, 255, 0.10));
color: #7C3AB2;
}
/* 特殊备注红条贴 */
.special-note-tag {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 8px;
background: rgba(255, 59, 48, 0.10);
color: #C73428;
font-family: var(--font-sans);
font-size: 10.5px;
font-weight: 600;
border-radius: 8px;
border: 1px solid rgba(255, 59, 48, 0.20);
letter-spacing: -0.005em;
cursor: help;
flex-shrink: 0;
white-space: nowrap;
}
.grid-card-special-note {
margin-top: 6px;
}
.prod-folder-card-special {
margin-top: 4px;
}
/* 版型类型 badge */
.sample-type-badge {
display: inline-flex; align-items: center;
padding: 2px 7px;
font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
letter-spacing: 0.04em; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
}
.sample-type-new { background: rgba(43,106,63,0.10); color: var(--ok); border: 1px solid rgba(43,106,63,0.18); }
.sample-type-remake { background: rgba(168,50,29,0.10); color: var(--danger); border: 1px solid rgba(168,50,29,0.18); }
.sample-type-photo { background: rgba(107,91,181,0.10); color: var(--stage-dev); border: 1px solid rgba(107,91,181,0.18); }
.sample-type-head { background: rgba(180,120,20,0.12); color: #8a5a00; border: 1px solid rgba(180,120,20,0.22); } /* 头版·借版改款首样 */
/* 开版码数 badge — 中性浅灰(全局基础,各 view 可覆盖) */
.dev-size-badge {
display: inline-flex; align-items: center;
padding: 2px 7px;
font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
letter-spacing: 0.04em; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
background: #F4F2EC; color: #4A4A48; border: 1px solid #E8E5DD;
}
/* 款式类目 badge — 米色暖系,跟整体米黄风格协调 */
.category-badge {
display: inline-flex; align-items: center;
padding: 2px 7px;
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.02em; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
background: #F7EFD9; color: #6B5419; border: 1px solid #EDE0BD;
}
/* 版型筛选按钮组 */
#sample-type-filters { display: none; }
#sample-type-filters.visible { display: flex; }
/* 抽屉 PO 列表里：原货期 → 现货期 */
.po-original-ef {
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--ink-mute);
text-decoration: line-through;
text-decoration-color: rgba(0, 0, 0, 0.30);
}
.po-arrow {
color: var(--ink-mute);
margin: 0 4px;
font-weight: 700;
}
/* ============================================================
收板拍照 + 寄出单号
============================================================ */
/* 收板登记 dialog 里的图片上传区 */
.cycle-photo-zone {
border: 1.5px dashed var(--line-strong);
border-radius: 10px;
padding: 14px;
cursor: pointer;
transition: background-color 0.16s, border-color 0.16s, color 0.16s, transform 0.16s, opacity 0.16s, box-shadow 0.16s;
background: var(--bg-sunken);
position: relative;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.cycle-photo-zone:hover {
border-color: var(--apple-blue, #007AFF);
background: rgba(0, 122, 255, 0.04);
}
.cycle-photo-zone.dragging {
border-color: var(--apple-blue, #007AFF);
background: rgba(0, 122, 255, 0.10);
border-style: solid;
}
.cycle-photo-zone.is-uploading {
cursor: wait;
border-color: var(--apple-blue, #007AFF);
background: rgba(0, 122, 255, 0.06);
}
.cycle-photo-zone.is-uploading::after {
content: attr(data-upload-status);
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: rgba(255,255,255,0.90);
color: var(--apple-blue, #007AFF);
font-size: 13px;
font-weight: 650;
pointer-events: none;
}
.cycle-photo-inner {
display: flex; flex-direction: row; flex-wrap: wrap;
align-items: center; justify-content: center;
gap: 8px; color: var(--ink-soft);
}
.fedex-lookup-btn { padding: 9px 14px; background: #4B286D; color: #fff; border: none; border-radius: 6px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.12s, opacity 0.12s, box-shadow 0.12s; letter-spacing: 0.02em; }
.fedex-lookup-btn:hover { background: #361E51; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(75,40,109,0.3); }
.pkg-arrived-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; background: #4B286D; color: #fff; border-radius: 8px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; white-space: nowrap; }
.cycle-photo-text {
font-family: var(--font-sans);
font-size: 12px;
color: var(--ink-mute);
letter-spacing: -0.005em;
}
.cycle-photo-preview { max-width: 100%; max-height: 200px; border-radius: 8px; display: block; box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
.cycle-photo-thumb-wrap { position: relative; display: inline-block; margin: 4px; }
.cycle-photo-thumb-wrap .cycle-photo-preview { max-width: 140px; max-height: 140px; border-radius: 6px; }
.cycle-photo-thumb-wrap .cycle-photo-clear { position: absolute; top: -6px; right: -6px; margin-top: 0; width: 20px; height: 20px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; line-height: 1; background: rgba(255,59,48,0.85); color: #fff; border: none; }
.cycle-photo-thumb-wrap .cycle-photo-clear:hover { background: #C73428; }
.cycle-photo-clear { margin-top: 8px; padding: 4px 12px; background: rgba(255,59,48,0.10); border: 1px solid rgba(255,59,48,0.20); color: #C73428; border-radius: 6px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s; }
.cycle-photo-clear:hover { background: rgba(255,59,48,0.18); }
/* big-flow 节点上的照片缩略图 — 支持多张横排 */
.big-flow-photos-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; margin-top: 8px; max-width: 130px; }
.big-flow-photo { display: block; width: 36px; height: 48px; border-radius: 6px; border: 1.5px solid var(--line); padding: 0; background: var(--bg-elevated); cursor: pointer; overflow: hidden; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s; flex-shrink: 0; }
.big-flow-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.big-flow-photo:hover { border-color: var(--apple-blue, #007AFF); transform: scale(1.12); box-shadow: 0 4px 14px rgba(0,122,255,0.28); z-index: 2; }
.big-flow-photo-count { display: inline-block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); font-weight: 500; width: 100%; text-align: center; margin-top: 2px; }
/* big-flow tracking */
.big-flow-tracking-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; margin-top: 6px; max-width: 130px; }
.big-flow-tracking { display: inline-block; padding: 2px 8px; background: rgba(0,122,255,0.08); border: 1px solid rgba(0,122,255,0.20); color: var(--apple-blue,#007AFF); border-radius: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.big-flow-tracking:hover { background: var(--apple-blue,#007AFF); color: white; transform: translateY(-1px); }
.big-flow-fedex-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; background: #4B286D; border: none; border-radius: 6px; font-size: 11px; cursor: pointer; transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.12s, opacity 0.12s, box-shadow 0.12s; flex-shrink: 0; }
.big-flow-fedex-btn:hover { transform: scale(1.12); box-shadow: 0 2px 6px rgba(75,40,109,0.35); }
.big-flow-arrival { font-family: var(--font-mono); font-size: 11px; color: var(--warn); font-weight: 600; white-space: nowrap; cursor: pointer; padding: 1px 4px; border-radius: 4px; transition: background 0.12s; }
.big-flow-arrival:hover { background: rgba(168,109,29,0.1); }
.big-flow-arrival.delivered { color: var(--ok); cursor: default; }
.big-flow-arrival.delivered:hover { background: transparent; }
.big-flow-sign-btn { padding: 1px 7px; background: var(--ok-bg); color: var(--ok); border: 1px solid rgba(43,106,63,0.2); border-radius: 6px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.12s, opacity 0.12s, box-shadow 0.12s; }
.big-flow-sign-btn:hover { background: var(--ok); color: #fff; border-color: var(--ok); }
/* === Style Gallery === */
/* #1: 整个画廊默认折叠 */
.style-gallery-collapsible {
border: 1px solid var(--line); border-radius: 12px;
background: var(--bg-elevated);
margin-bottom: 24px;
overflow: hidden;
}
.style-gallery-summary {
cursor: pointer; list-style: none;
user-select: none;
display: flex; align-items: center; gap: 10px;
padding: 14px 18px;
}
.style-gallery-summary::-webkit-details-marker { display: none; }
.style-gallery-summary:hover { background: var(--bg-hover); }
.style-gallery-summary .gallery-chevron {
color: var(--ink-mute);
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
.style-gallery-collapsible[open] .gallery-chevron { transform: rotate(90deg); }
.gallery-summary-title { font-size: 13px; font-weight: 600; }
.gallery-summary-hint { color: var(--ink-mute); font-size: 11px; margin-left: auto; }
.style-gallery-collapsible[open] .gallery-summary-hint { display: none; }
.style-gallery { background: var(--bg-sunken); padding: 0; overflow: hidden; }
.style-gallery-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); gap: 12px; }
.style-gallery-title { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.style-gallery-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); background: var(--bg-elevated); padding: 2px 8px; border-radius: 10px; }
.style-gallery-filter { flex: 1; max-width: 200px; }
.style-gallery-filter input { width: 100%; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 6px; font-family: var(--font-sans); font-size: 12px; color: var(--ink); background: var(--bg-elevated); outline: none; }
.style-gallery-filter input:focus { border-color: var(--ink); }
.style-gallery-body { padding: 8px 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.style-gallery-empty { padding: 8px 0 0; }
.style-gallery-group { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg-elevated); }
.style-gallery-group-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; gap: 10px; }
.style-gallery-group-header:hover { background: var(--bg-sunken); }
.grp-left { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.grp-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.grp-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); background: var(--bg-sunken); padding: 2px 7px; border-radius: 10px; }
.grp-chevron { font-size: 11px; color: var(--ink-mute); transition: transform 0.2s; flex-shrink: 0; }
.style-gallery-group.open .grp-chevron { transform: rotate(90deg); }
.grp-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.grp-act-btn { display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 4px 7px; border: none; background: transparent; color: var(--ink-mute); border-radius: 6px; cursor: pointer; transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.12s, opacity 0.12s, box-shadow 0.12s; font-family: var(--font-sans); font-weight: 500; }
.grp-act-btn:hover { background: var(--bg-elevated); color: var(--ink-soft); }
.grp-act-btn.active { color: var(--ink); background: var(--bg-elevated); }
.grp-act-primary { color: var(--ink-soft); }
.grp-act-primary:hover { color: var(--ink); }
.style-gallery-group-grid { display: none; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 0 14px 14px; }
.style-gallery-group.open .style-gallery-group-grid { display: grid; }
.style-gallery-group-grid .drawer-empty-state { grid-column: 1 / -1; }
.gallery-card { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s; position: relative; }
.gallery-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.06); border-color: var(--line-strong); }
.gallery-card-thumb { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: var(--bg-sunken); }
.gallery-card-info { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.gallery-card-label { font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-card-date { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.gallery-card-check { position: absolute; top: 5px; left: 5px; z-index: 2; opacity: 0; transition: opacity 0.12s; }
.gallery-card:hover .gallery-card-check, .gallery-card-check:has(input:checked) { opacity: 1; }
.gallery-card-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-mark { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; background: var(--bg-elevated); border: 1.5px solid var(--line-strong); cursor: pointer; transition: background-color 0.12s, border-color 0.12s, color 0.12s, transform 0.12s, opacity 0.12s, box-shadow 0.12s; }
.check-mark::after { content: ''; display: none; width: 5px; height: 9px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin-top: -1px; }
.gallery-card-check input:checked + .check-mark { background: var(--ink); border-color: var(--ink); }
.gallery-card-check input:checked + .check-mark::after { display: block; }
/* 图片删除按钮 */
.gallery-card-delete { position: absolute; top: 5px; right: 5px; z-index: 3; opacity: 0; transition: opacity 0.12s; }
.gallery-card:hover .gallery-card-delete { opacity: 1; }
.gallery-delete-btn { width: 22px; height: 22px; border-radius: 50%; background: rgba(168,50,29,0.85); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; transition: background 0.12s; }
.gallery-delete-btn:hover { background: #C73428; }
/* 图片上传区（Gallery组内底部） */
.grp-upload-zone { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; border: 1.5px dashed var(--line-strong); border-radius: 8px; padding: 16px 12px; text-align: center; cursor: pointer; color: var(--ink-mute); font-family: var(--font-sans); font-size: 11px; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s; background: var(--bg-sunken); margin: 8px 14px 14px; min-height: 50px; box-sizing: border-box; }
.grp-upload-zone:hover, .grp-upload-zone.drag-over { border-color: #007AFF; background: rgba(0,122,255,0.04); color: var(--ink-soft); }
.grp-upload-zone.is-uploading { position: relative; cursor: wait; border-color: #007AFF; background: rgba(0,122,255,0.06); color: transparent; }
.grp-upload-zone.is-uploading::after { content: attr(data-upload-status); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #007AFF; font-size: 12px; font-weight: 650; }
.grp-upload-zone input { display: none; }
.grp-upload-icon { font-size: 18px; line-height: 1; }
/* === Global Animations === */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
main { animation: fadeInUp 0.25s ease-out; }
.toast { animation: fadeInUp 0.25s ease-out; transition: opacity 0.2s, transform 0.2s; }
.toast.fading { opacity: 0; transform: translateY(-8px); }
.drawer.open { animation: none; }
.style-row { animation: fadeIn 0.15s ease-out; }
/* ───────── 大货到货登记 modal 样式 ───────── */
/* 多 PO 选择器 */
.prod-po-selector {
display: grid;
gap: 8px;
}
.prod-po-option {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
align-items: start;
gap: 10px;
padding: 11px 12px;
background: var(--bg-elevated);
border: 0.5px solid var(--line-strong);
border-radius: 8px;
cursor: pointer;
transition: background-color 0.1s, border-color 0.1s, color 0.1s, transform 0.1s, opacity 0.1s, box-shadow 0.1s;
}
.prod-po-option input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
margin: 2px 0 0;
border-radius: 50%;
border: 1.5px solid var(--line-strong);
background: var(--bg);
box-shadow: inset 0 0 0 3px var(--bg);
}
.prod-po-option input[type="radio"]:checked {
border-color: var(--accent);
background: var(--accent);
}
.prod-po-option input[type="radio"]:focus-visible {
outline: 2px solid rgba(0, 122, 255, 0.18);
outline-offset: 2px;
}
.prod-po-option:hover {
border-color: var(--accent);
}
.prod-po-option:has(input:checked) {
border-color: var(--accent);
background: rgba(0, 122, 255, 0.06);
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.08);
}
.prod-po-option.po-done {
opacity: 0.55;
cursor: not-allowed;
}
.prod-po-option-info {
min-width: 0;
}
.prod-po-option-line1 {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
font-weight: 600;
font-size: 13px;
min-width: 0;
}
.prod-po-option-no {
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: .02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.prod-po-option-color {
font-size: 11px;
font-weight: 700;
color: var(--ink-soft);
background: var(--bg-sunken);
padding: 2px 7px;
border-radius: 4px;
}
.prod-po-option-line2 {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
margin-top: 3px;
}
.prod-po-option-remain {
display: inline-flex;
align-items: center;
width: fit-content;
white-space: nowrap;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--warn);
background: var(--warn-bg);
border-radius: 999px;
padding: 2px 8px;
margin-top: 7px;
}
.prod-po-option-remain.done {
color: var(--ok);
background: var(--ok-bg);
}
.prod-po-option-ex {
display: inline-flex;
grid-column: 2;
justify-self: start;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 700;
color: var(--accent);
background: rgba(0, 122, 255, 0.08);
border-radius: 999px;
padding: 2px 8px;
}
.prod-arrival-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
gap: 10px;
}
.prod-arrival-grid input { width: 100%; box-sizing: border-box; }
/* 单 PO 信息条 */
.prod-po-info-banner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px 12px;
align-items: start;
padding: 10px 12px;
background: var(--bg-sunken);
border: 0.5px solid var(--line);
border-radius: 8px;
margin-bottom: 14px;
font-size: 12px;
}
.prod-po-info-main {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.prod-po-info-meta {
grid-column: 1 / -1;
display: flex;
gap: 8px;
flex-wrap: wrap;
color: var(--ink-mute);
font-size: 11.5px;
font-family: var(--font-mono);
}
.prod-po-info-banner .lbl {
font-family: var(--font-mono);
color: var(--ink-mute);
font-size: 11px;
letter-spacing: 0.04em;
}
.prod-po-info-banner .val {
font-weight: 600;
}
.prod-po-info-color {
font-size: 11px;
color: var(--ink-soft);
background: var(--bg-elevated);
padding: 1px 7px;
border-radius: 4px;
}
.prod-po-info-ex {
color: var(--accent);
background: rgba(0, 122, 255, 0.08);
border-radius: 999px;
padding: 2px 8px;
font-weight: 700;
}
.prod-po-info-qty {
font-family: var(--font-mono);
color: var(--ink-mute);
white-space: nowrap;
}
/* 已有批次摘要 */
.prod-existing-summary {
padding: 8px 12px;
background: rgba(0, 122, 255, 0.06);
border: 1px solid rgba(0, 122, 255, 0.18);
border-radius: 8px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--accent);
margin-bottom: 14px;
}
/* 瑕疵 6 类输入 */
.defect-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 6px;
}
.defect-cell {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 7px 8px;
background: var(--bg-sunken);
border: 0.5px solid var(--line);
border-radius: 8px;
}
.defect-label {
font-size: 12px;
color: var(--ink-soft);
font-weight: 500;
min-width: 28px;
}
.defect-input {
width: 100%;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 6px;
padding: 5px 8px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--ink);
outline: none;
text-align: right;
}
.defect-input:focus {
border-color: var(--accent);
}
.defect-total {
margin-top: 8px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-mute);
text-align: right;
}
/* production-qc-defect-photo-css-split-v1: defect and batch photo CSS moved to /gc-production-qc.css. */
/* "已全部收齐" checkbox */
.prod-fully-checkbox {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: var(--ok-bg);
border-radius: 6px;
cursor: pointer;
font-size: 13px;
}
.prod-fully-checkbox input {
width: 16px;
height: 16px;
cursor: pointer;
}
/* ───────── 抽屉里的"大货到货历史"模块 ───────── */
.prod-history-po-summary {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 12px;
background: var(--bg-sunken);
border-radius: 6px;
margin-bottom: 10px;
font-family: var(--font-mono);
font-size: 11px;
}
.prod-po-row {
display: flex;
gap: 8px;
align-items: center;
}
.prod-po-row .po-no {
font-weight: 600;
color: var(--ink);
}
.prod-po-row .po-color {
color: var(--ink-soft);
}
.prod-po-row .po-qty {
margin-left: auto;
color: var(--ink);
}
.prod-po-row .po-done-tag {
color: var(--ok);
font-weight: 700;
}
.prod-po-row .po-remaining {
color: var(--warn);
}
.prod-po-row.done .po-no {
text-decoration: line-through;
opacity: 0.6;
}
.prod-batch-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.prod-batch-card {
padding: 10px 12px;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: 6px;
}
.prod-batch-head {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 6px;
}
.prod-batch-num {
font-weight: 700;
font-size: 13px;
color: var(--accent);
}
.prod-batch-date {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-soft);
}
.prod-batch-po {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
background: var(--bg-sunken);
padding: 1px 7px;
border-radius: 4px;
}
.prod-batch-qty {
margin-left: auto;
font-weight: 600;
font-size: 13px;
color: var(--ink);
}
.prod-batch-defects {
display: flex;
gap: 8px;
align-items: baseline;
margin-top: 4px;
padding: 6px 10px;
background: var(--warn-bg);
border-radius: 4px;
font-size: 12px;
}
.prod-batch-defects-total {
font-weight: 700;
color: var(--warn);
}
.prod-batch-defects-detail {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-soft);
}
.prod-batch-note {
margin-top: 6px;
font-size: 12px;
color: var(--ink-soft);
line-height: 1.5;
}
.prod-batch-note .lbl {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-mute);
margin-right: 4px;
letter-spacing: 0.04em;
}
/* ───────── PO 图片上传 dropzone ───────── */
.po-image-dropzone {
position: relative;
border: 2px dashed var(--line-strong);
border-radius: 8px;
background: var(--bg-sunken);
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s, box-shadow 0.15s;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.po-image-dropzone:hover {
border-color: var(--accent);
background: rgba(0, 122, 255, 0.04);
}
.po-image-dropzone.drag-over {
border-color: var(--accent);
background: rgba(0, 122, 255, 0.10);
}
.po-image-dropzone.has-image {
border-style: solid;
padding: 0;
cursor: default;
}
.po-image-placeholder {
display: flex;
align-items: center;
gap: 14px;
padding: 20px;
color: var(--ink-soft);
pointer-events: none;
}
.po-image-icon {
font-size: 28px;
}
.po-image-hint {
font-size: 12px;
line-height: 1.6;
}
.po-image-hint b {
color: var(--accent);
font-weight: 600;
}
.po-image-preview {
position: relative;
display: inline-flex;
width: 100%;
justify-content: center;
}
.po-image-preview img {
max-width: 100%;
max-height: 240px;
display: block;
object-fit: contain;
border-radius: 6px;
}
.po-image-remove {
position: absolute;
top: 6px;
right: 6px;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.65);
color: white;
border: none;
font-size: 16px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: background 0.1s;
}
.po-image-remove:hover {
background: var(--danger);
}
/* multi-photo-display-v1: PO 图片多缩略图 grid */
.po-image-dropzone.has-image { padding: 8px; display: block; align-items: stretch; }
.po-image-thumbs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 6px;
}
.po-image-thumb-wrap {
position: relative;
aspect-ratio: 1 / 1;
background: var(--bg-sunken);
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--line);
}
.po-image-thumb-wrap.is-main {
border: 2px solid var(--apple-blue, #007AFF);
}
.po-image-thumb-wrap { cursor: grab; transition: transform .12s, opacity .12s, box-shadow .12s; }
.po-image-thumb-wrap:active { cursor: grabbing; }
.po-image-thumb-wrap.dragging-src { opacity: 0.4; }
.po-image-thumb-wrap.drag-over-target {
box-shadow: 0 0 0 3px var(--apple-blue, #007AFF) inset, 0 0 0 1px var(--apple-blue, #007AFF);
transform: scale(1.03);
}
.po-image-thumb-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.po-image-main-badge {
position: absolute;
top: 4px;
left: 4px;
background: var(--apple-blue, #007AFF);
color: #fff;
font-size: 10px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
line-height: 1;
}
.po-image-remove-thumb {
position: absolute;
top: 3px;
right: 3px;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
font-size: 13px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
padding: 0;
}
.po-image-remove-thumb:hover { background: var(--danger, #D70015); }
.po-image-add-tile {
aspect-ratio: 1 / 1;
background: #fff;
border: 2px dashed var(--line-strong, #D1D1D6);
border-radius: 6px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--ink-mute, #6B6B6E);
font-size: 11px;
gap: 2px;
transition: border-color .12s, background-color .12s, color .12s;
}
.po-image-add-tile:hover {
border-color: var(--apple-blue, #007AFF);
background: rgba(0,122,255,0.04);
color: var(--apple-blue, #007AFF);
}
.po-image-add-tile-plus { font-size: 22px; line-height: 1; font-weight: 300; }
.po-image-add-tile-text { font-size: 11px; }
.po-image-thumbs-hint {
margin-top: 8px;
font-size: 11px;
color: var(--ink-mute, #6B6B6E);
text-align: center;
}
/* ============ 颜色选择器 (新增款式 + 款式详情共用) ============ */
.color-picker {
display: flex;
flex-direction: column;
gap: 10px;
background: var(--bg);
border: 1px solid var(--line-strong);
border-radius: 10px;
padding: 12px;
}
.cp-selected {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-height: 28px;
align-items: center;
}
.cp-selected-empty {
font-size: 12px;
color: var(--ink-mute);
font-style: italic;
}
.cp-chip-selected {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px 4px 10px;
background: var(--ink);
color: var(--bg);
border-radius: 999px;
font-size: 11.5px;
line-height: 1.2;
}
.cp-chip-selected .cp-chip-en {
font-family: var(--font-mono);
font-weight: 600;
letter-spacing: 0.02em;
}
.cp-chip-selected .cp-chip-zh {
font-family: var(--font-sans);
opacity: 0.75;
font-size: 11px;
}
.cp-chip-x {
background: rgba(255,255,255,0.18);
color: var(--bg);
border: none;
width: 16px;
height: 16px;
border-radius: 999px;
font-size: 13px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.cp-chip-x:hover { background: var(--danger); }
.cp-search-row {
display: flex;
gap: 8px;
align-items: stretch;
}
.cp-search {
flex: 1;
background: var(--bg-elevated);
border: 1px solid var(--line-strong);
padding: 8px 11px;
font-family: var(--font-sans);
font-size: 13px;
border-radius: 8px;
outline: none;
}
.cp-search:focus { border-color: var(--ink-soft); }
.cp-add-btn {
white-space: nowrap;
background: var(--bg-elevated);
border: 1px dashed var(--line-strong);
color: var(--ink-soft);
font-family: var(--font-sans);
font-size: 12px;
padding: 6px 12px;
border-radius: 8px;
cursor: pointer;
}
.cp-add-btn:hover {
border-color: var(--ink);
color: var(--ink);
background: var(--bg);
}
.cp-grid {
display: flex;
flex-wrap: wrap;
gap: 5px;
max-height: 220px;
overflow-y: auto;
padding: 2px;
}
.cp-chip {
display: inline-flex;
align-items: baseline;
gap: 5px;
background: var(--bg-elevated);
border: 1px solid var(--line);
color: var(--ink-soft);
padding: 5px 9px;
border-radius: 999px;
font-size: 11.5px;
cursor: pointer;
line-height: 1.2;
}
.cp-chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.cp-chip.on {
background: var(--ink);
color: var(--bg);
border-color: var(--ink);
}
.cp-chip .cp-chip-en {
font-family: var(--font-mono);
font-weight: 600;
letter-spacing: 0.02em;
}
.cp-chip .cp-chip-zh {
font-family: var(--font-sans);
opacity: 0.7;
font-size: 10.5px;
}
.cp-chip-empty {
cursor: default;
font-style: italic;
color: var(--ink-mute);
background: transparent;
border-style: dashed;
}
.cp-chip-empty:hover { color: var(--ink-mute); border-color: var(--line); }
/* 新增颜色二级 modal — 比主 modal 层级高,自带 backdrop */
.add-color-backdrop {
position: fixed; inset: 0;
background: rgba(15, 15, 10, 0.5);
backdrop-filter: blur(4px);
z-index: 300;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.add-color-backdrop.open { display: flex; }
.add-color-dialog {
background: var(--bg-elevated);
border-radius: 14px;
width: 100%;
max-width: 360px;
padding: 20px 22px;
box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.add-color-dialog h4 {
margin: 0 0 14px;
font-family: var(--font-serif);
font-size: 18px;
font-style: italic;
font-weight: 400;
}
.add-color-dialog label {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-mute);
margin: 10px 0 5px;
}
.add-color-dialog input {
width: 100%;
background: var(--bg);
border: 1px solid var(--line-strong);
padding: 8px 10px;
font-family: var(--font-sans);
font-size: 13px;
border-radius: 7px;
outline: none;
}
.add-color-dialog input:focus { border-color: var(--ink-soft); }
.add-color-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 18px;
}
.add-color-actions button {
padding: 7px 16px;
border-radius: 7px;
font-family: var(--font-sans);
font-size: 12.5px;
cursor: pointer;
}
.add-color-actions .cancel {
border: 1px solid var(--line-strong);
background: var(--bg-elevated);
color: var(--ink);
}
.add-color-actions .confirm {
background: var(--ink);
color: var(--bg);
border: 1px solid var(--ink);
}
/* 已选颜色徽章在卡片/详情上显示用 */
.style-colors-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.style-color-badge {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
padding: 2px 7px;
border-radius: 999px;
background: var(--bg-sunken);
color: var(--ink-soft);
border: 1px solid var(--line);
}
/* 颜色 chip — 跟其他属性 chip 一起在主行,样式对齐 sample-type/category */
.color-badge-inline {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 2px 7px;
background: #F4F2EC;
border: 1px solid #E8E5DD;
color: #6A6A66;
white-space: nowrap;
flex-shrink: 0;
}
.color-badge-more {
font-weight: 700;
background: transparent;
border-style: dashed;
color: #888;
}
/* ============ 新款工艺信息 — 客户需求 / 面料 / 状态 chip ============ */
/* 2026-05-12 加 — 配合 style.clientRequirement / fabricInfo / fabricStatus */
:root {
--warn-bg: oklch(96% 0.04 70);
--warn-ink: oklch(40% 0.15 50);
--warn-border: oklch(82% 0.08 60);
--ok-bg: oklch(95% 0.04 145);
--ok-ink: oklch(38% 0.14 145);
}
.tex-clientreq {
font-family: ui-monospace, "SF Mono", Menlo, "PingFang SC", monospace !important;
font-size: 13px !important;
line-height: 1.62;
}
.fabric-block-edit {
border: 1px solid var(--border-strong, #d2d2d7);
border-radius: 8px;
background: var(--surface, #fff);
overflow: hidden;
transition: border-color 140ms ease-out, box-shadow 140ms ease-out;
}
.fabric-block-edit:focus-within {
border-color: var(--accent, #0071e3);
box-shadow: 0 0 0 3px var(--accent-soft, #e8f1fd);
}
.fabric-block-edit.is-pending {
background: linear-gradient(180deg, var(--warn-bg) 0%, var(--surface, #fff) 60%);
}
.fabric-block-edit .fabric-head {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 11px;
border-bottom: 1px solid var(--border, #e5e5ea);
}
.fabric-block-edit .fabric-head .lbl {
font-size: 12px; color: var(--ink-soft, #444);
}
.fabric-block-edit .fabric-head .lbl strong { font-weight: 600; color: var(--ink, #1d1d1f); }
.fabric-block-edit textarea {
border: 0 !important; box-shadow: none !important;
border-radius: 0 !important;
background: transparent !important;
padding: 10px 11px !important;
width: 100%;
min-height: 64px;
resize: vertical;
}
.fabric-block-edit textarea:focus { box-shadow: none !important; }
/* ============ 富文本编辑器 (rich-editor) — Apple 风 ============ */
.rich-editor {
border: 1px solid var(--line, #E5E5EA);
border-radius: 10px;
background: var(--bg-elevated, #FFFFFF);
overflow: hidden;
transition: border-color 140ms;
white-space: normal;
}
.rich-editor-content {
white-space: pre-wrap;
}
.rich-editor:focus-within {
border-color: var(--apple-blue, #007AFF);
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}
.rich-editor-toolbar {
display: flex;
align-items: center;
gap: 1px;
padding: 6px 8px;
border-bottom: 1px solid #F2F2F5;
background: #FBFBFD;
}
.rich-editor-toolbar button {
width: 26px;
height: 26px;
background: transparent;
border: 0;
font-size: 13px;
color: var(--ink, #1D1D1F);
border-radius: 5px;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 120ms;
}
.rich-editor-toolbar button:hover {
background: rgba(0, 0, 0, 0.05);
}
.rich-editor-toolbar button:active {
background: rgba(0, 0, 0, 0.10);
}
.rich-editor-toolbar button.is-active {
background: rgba(0, 122, 255, 0.10);
color: var(--apple-blue, #007AFF);
}
.rich-editor-toolbar .b-btn { font-weight: 600; }
.rich-editor-toolbar .i-btn { font-style: italic; }
.rich-editor-toolbar .u-btn { text-decoration: underline; }
.rich-editor-toolbar .sep {
width: 1px;
height: 16px;
background: var(--line, #E5E5EA);
margin: 0 6px;
}
.rich-editor-toolbar .size-btn {
width: auto;
padding: 0 8px;
gap: 3px;
font-size: 12px;
}
.rich-editor-toolbar .size-btn svg { opacity: 0.6; }
.rich-editor-toolbar .color-btn {
position: relative;
font-weight: 600;
}
.rich-editor-toolbar .color-btn .color-bar {
position: absolute;
bottom: 5px;
left: 7px;
right: 7px;
height: 2.5px;
border-radius: 1px;
background: #FF3B30;
}
.rich-editor-toolbar .clear-btn { color: var(--ink-mute, #86868B); }
.rich-editor-toolbar .icon-btn svg { width: 14px; height: 14px; }
.rich-editor-toolbar .size-btn svg { width: 9px; height: 9px; opacity: 0.6; }
.rich-editor-content {
padding: 12px 14px;
min-height: 100px;
max-height: 320px;
overflow-y: auto;
font-size: 13px;
line-height: 1.65;
color: var(--ink, #1D1D1F);
outline: none;
cursor: text;
}
.rich-editor-content:empty:before {
content: attr(data-placeholder);
color: #C7C7CC;
font-style: italic;
pointer-events: none;
}
.rich-editor-content img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 4px 0;
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
.rich-editor-content img.__img-selected {
outline: 2px solid #007AFF;
outline-offset: 2px;
}
.__img-resize-wrap {
position: absolute;
pointer-events: none;
z-index: 9998;
}
.__img-resize-handle {
position: absolute;
right: -7px;
bottom: -7px;
width: 14px;
height: 14px;
background: #FFFFFF;
border: 2px solid #007AFF;
border-radius: 50%;
cursor: nwse-resize;
pointer-events: auto;
box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
}
.__img-resize-tip {
position: absolute;
right: -2px;
bottom: -32px;
background: #1D1D1F;
color: #FFFFFF;
font-size: 11px;
padding: 3px 8px;
border-radius: 5px;
white-space: nowrap;
pointer-events: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.rich-editor-content p { margin: 0 0 6px 0; }
.rich-editor-content p:last-child { margin-bottom: 0; }
/* 字号下拉(在按钮下方弹出) */
.size-popover {
position: absolute;
background: var(--bg-elevated, #FFFFFF);
border: 1px solid var(--line, #E5E5EA);
border-radius: 10px;
padding: 4px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
z-index: 500;
min-width: 80px;
}
.size-popover button {
display: block;
width: 100%;
background: transparent;
border: 0;
text-align: left;
padding: 6px 10px;
font-size: 12.5px;
color: var(--ink, #1D1D1F);
border-radius: 6px;
cursor: pointer;
}
.size-popover button:hover { background: rgba(0, 0, 0, 0.05); }
/* 模板按钮行 — 跟 label 同行,右侧 */
.rich-editor-tools-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
gap: 8px;
}
.rich-editor-tools-row label {
margin: 0 !important;
}
.rich-editor-tools-row .tmpl-btn-group {
display: flex;
gap: 4px;
}
.rich-editor-tools-row .tmpl-btn {
background: rgba(0, 0, 0, 0.04);
border: 0;
color: var(--ink, #1D1D1F);
font-size: 12px;
padding: 5px 11px;
border-radius: 7px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-sans);
transition: background 120ms;
}
.rich-editor-tools-row .tmpl-btn:hover {
background: rgba(0, 0, 0, 0.08);
}
.rich-editor-tools-row .tmpl-btn svg { width: 11px; height: 11px; }
.rich-editor-tools-row .tmpl-btn.btn-save {
background: transparent;
color: var(--apple-blue, #007AFF);
padding: 5px 8px;
}
.rich-editor-tools-row .tmpl-btn.btn-save:hover {
background: rgba(0, 122, 255, 0.10);
}
/* 颜色选择 popover */
.color-popover {
position: absolute;
background: var(--bg-elevated, #FFFFFF);
border: 1px solid var(--line, #E5E5EA);
border-radius: 10px;
padding: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
z-index: 500;
display: grid;
grid-template-columns: repeat(5, 22px);
gap: 5px;
}
.color-popover .color-swatch {
width: 22px;
height: 22px;
border-radius: 5px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.08);
transition: transform 100ms;
}
.color-popover .color-swatch:hover {
transform: scale(1.12);
}
/* 模板小窗 */
.template-modal-backdrop {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 350;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.template-modal-backdrop.open { display: flex; }
.template-modal {
background: var(--bg-elevated, #FFFFFF);
border-radius: 14px;
width: 100%;
max-width: 440px;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20);
overflow: hidden;
}
.template-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px 10px;
}
.template-modal-head h4 {
margin: 0;
font-family: var(--font-serif, ui-serif);
font-style: italic;
font-size: 18px;
font-weight: 400;
color: var(--ink, #1D1D1F);
}
.template-modal-head .close-btn {
width: 28px;
height: 28px;
background: rgba(0, 0, 0, 0.04);
border: 0;
color: var(--ink-mute, #86868B);
font-size: 16px;
line-height: 1;
cursor: pointer;
padding: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.template-modal-head .close-btn:hover { background: rgba(0, 0, 0, 0.08); }
.template-modal-body {
padding: 4px 18px 14px;
overflow-y: auto;
flex: 1;
}
.template-modal-search {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--line, #E5E5EA);
border-radius: 8px;
font-size: 13px;
margin-bottom: 10px;
outline: none;
box-sizing: border-box;
background: var(--bg-sunken, #F5F5F7);
}
.template-modal-search:focus { border-color: var(--apple-blue, #007AFF); background: #FFF; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.10); }
.tmpl-list { display: flex; flex-direction: column; gap: 4px; }
.tmpl-item {
padding: 10px 12px;
background: transparent;
border: 0;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
transition: background 120ms;
}
.tmpl-item:hover { background: var(--bg-sunken, #F5F5F7); }
.tmpl-item-main { flex: 1; min-width: 0; }
.tmpl-item-name {
font-size: 13px;
font-weight: 500;
color: var(--ink, #1D1D1F);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tmpl-item-meta {
font-size: 11.5px;
color: var(--ink-mute, #86868B);
margin-top: 2px;
}
.tmpl-item-actions {
display: flex;
gap: 4px;
opacity: 0;
transition: opacity 120ms;
}
.tmpl-item:hover .tmpl-item-actions { opacity: 1; }
.tmpl-item-actions button {
background: transparent;
border: 0;
font-size: 12px;
cursor: pointer;
padding: 4px 10px;
border-radius: 6px;
color: #FF3B30;
}
.tmpl-item-actions button:hover { background: rgba(255, 59, 48, 0.10); }
.template-modal-foot {
padding: 10px 18px 16px;
display: flex;
gap: 8px;
justify-content: flex-end;
}
.template-modal-foot button {
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
font-family: var(--font-sans);
font-weight: 500;
}
.template-modal-foot .cancel {
background: rgba(0, 0, 0, 0.04);
border: 0;
color: var(--ink, #1D1D1F);
}
.template-modal-foot .cancel:hover { background: rgba(0, 0, 0, 0.08); }
.template-modal-foot .confirm {
background: var(--apple-blue, #007AFF);
color: #FFF;
border: 0;
}
.template-modal-foot .confirm:hover { background: #0062CC; }
.tmpl-empty {
text-align: center;
padding: 28px 20px;
color: var(--ink-mute, #86868B);
font-size: 13px;
}
/* 抽屉里渲染富文本展示(只读) */
.rich-display {
font-size: 13px;
line-height: 1.65;
color: var(--ink, #1D1D1F);
word-break: break-word;
}
.rich-display img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 4px 0;
display: inline-block;
vertical-align: middle;
}
.rich-display p { margin: 0 0 6px 0; }
.rich-display p:last-child { margin-bottom: 0; }
/* segmented chip — 二档单选(面料状态) */
.seg-chip {
display: inline-flex;
background: var(--bg-sunken, #f0f0f3);
border: 1px solid var(--border, #e5e5ea);
border-radius: 999px;
padding: 2px;
gap: 2px;
}
.seg-chip-btn {
font: inherit;
font-size: 11.5px; font-weight: 500;
padding: 4px 10px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--ink-mute, #6e6e73);
cursor: pointer;
letter-spacing: 0.01em;
transition: background 160ms ease-out, color 160ms ease-out;
}
.seg-chip-btn:hover { color: var(--ink, #1d1d1f); }
.seg-chip-btn.active.is-pending {
background: var(--warn-ink);
color: #fff;
}
.seg-chip-btn.active.is-sourced {
background: var(--ok-ink);
color: #fff;
}
/* 抽屉里块组件 */
.spec-block {
margin: 0 0 14px;
border: 1px solid var(--border, #e5e5ea);
border-radius: 8px;
background: var(--surface, #fff);
overflow: hidden;
}
/* client-req-versions-v1 + spec-versions-v2: 版本 tabs(紧凑版,减少空白) */
.cr-ver-tabs {
display: flex;
gap: 3px;
flex-wrap: wrap;
align-items: center;
padding: 4px 10px 0;
border-bottom: 1px solid var(--line, #e5e5ea);
background: #FAFAFC;
}
.cr-ver-tab {
padding: 4px 10px;
border-radius: 6px 6px 0 0;
font-size: 11.5px;
cursor: pointer;
border: 1px solid var(--line, #e5e5ea);
border-bottom: none;
background: var(--bg-sunken, #EBEBEF);
color: var(--ink-soft);
display: flex;
align-items: center;
gap: 5px;
margin-bottom: -1px;
transition: background 0.12s;
}
.cr-ver-tab:hover { background: #fff; }
.cr-ver-tab.active {
background: #fff;
color: var(--ink);
font-weight: 600;
border-color: var(--line);
border-bottom: 1px solid #fff;
z-index: 1;
}
.cr-ver-label { font-family: var(--font-mono, monospace); }
.cr-ver-author { font-size: 10.5px; color: var(--ink-mute); }
.cr-ver-latest-badge {
background: var(--ok, #248A3D); color: #fff;
font-size: 9.5px; padding: 1px 5px; border-radius: 6px;
font-weight: 700; letter-spacing: 0.3px;
}
/* note-sync-v1: 来源 chip — 自动同步过来的客户需求版本显示 🔗 fit / 🔗 整版重做 / 🔗 客户评语 */
.cr-ver-source {
background: #EEF4FF; color: #007AFF;
font-size: 9.5px; padding: 1px 6px; border-radius: 6px;
font-weight: 600; letter-spacing: 0.2px;
border: 1px solid #D6E4FF;
}
.cr-ver-add-btn {
margin-left: auto;
background: var(--apple-blue, #007AFF);
color: #fff;
border: none;
padding: 4px 11px;
border-radius: 5px;
font-size: 11.5px;
cursor: pointer;
font-weight: 500;
margin-bottom: 4px;
}
.cr-ver-add-btn:hover { background: var(--apple-blue-hover, #0051D5); }
/* fabric-color-info-v1: 面料颜色是并列资料,版本 tab 仍表示当前颜色的历史 */
.fabric-color-tabs {
display: flex;
gap: 7px;
flex-wrap: wrap;
padding: 8px 10px;
border-bottom: 1px solid var(--line, #e5e5ea);
background: #fff;
}
.fabric-color-tab {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 5px 10px;
border: 1px solid var(--line, #e5e5ea);
border-radius: 8px;
background: var(--bg-sunken, #f5f5f7);
color: var(--ink-soft);
font: inherit;
font-size: 12px;
cursor: pointer;
}
.fabric-color-tab:hover { background: #fff; }
.fabric-color-tab.active {
border-color: var(--apple-blue, #007aff);
background: var(--apple-blue-bg, #eef5ff);
color: var(--ink, #1d1d1f);
box-shadow: 0 0 0 1px rgba(0,122,255,0.08);
}
.fabric-color-swatch {
width: 9px;
height: 9px;
border-radius: 50%;
background: currentColor;
opacity: 0.72;
}
.fabric-color-tab.is-sourced .fabric-color-swatch { color: var(--ok, #248a3d); }
.fabric-color-tab.is-pending .fabric-color-swatch { color: var(--warn, #b25400); }
.fabric-color-state {
font-size: 10.5px;
color: var(--ink-mute, #6e6e73);
}
.fabric-color-tab.is-sourced .fabric-color-state { color: var(--ok, #248a3d); }
.fabric-color-tab.is-pending .fabric-color-state { color: var(--warn, #b25400); }
.fabric-split-enable-btn {
border: 1px solid #b8d2ff;
border-radius: 7px;
background: #eef5ff;
color: #0057d8;
padding: 5px 9px;
font: inherit;
font-size: 11px;
white-space: nowrap;
cursor: pointer;
}
.fabric-split-enable-btn:hover { background: #e2eeff; }
.fabric-split-enable-btn.is-cancel {
border-color: var(--line-strong, #d1d1d6);
background: #fff;
color: var(--ink-soft, #6e6e73);
}
.fabric-split-enable-btn.is-cancel:hover { background: var(--bg-sunken, #f5f5f7); color: var(--ink, #1d1d1f); }
/* spec-versions-v4 (用户 5/22): 终极空白杀手 — 把 spec-block-body 顶部所有可能贡献空白的都灭掉 */
.spec-block.has-versions .spec-block-body,
.spec-block .cr-ver-tabs + .spec-block-body { padding-top: 6px !important; }
/* 1. 所有第一个子元素的 margin-top / padding-top 清零 */
.spec-block-body > *:first-child,
.spec-block-body > *:first-child > *:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 2. 把 contenteditable 经常加在头部的"空白" 元素隐藏(Chrome 的
/ 空 等) */
.spec-block-body > br:first-child,
.spec-block-body > p:first-child:empty,
.spec-block-body > div:first-child:empty,
.spec-block-body > span:first-child:empty { display: none !important; }
/* 现代浏览器支持 :has — 处理
这种"只含一个 br" 的空行 */
@supports selector(:has(*)) {
.spec-block-body > div:first-child:has(> br:only-child),
.spec-block-body > p:first-child:has(> br:only-child) { display: none !important; }
}
/* 3. font 标签(老富文本编辑器爱用)默认有行高 — 重置 */
.spec-block-body > font:first-child { line-height: 1.2 !important; }
/* spec-versions-v5: 大字体首子元素强制 line-height 紧凑 */
.spec-block-body > *:first-child {
line-height: 1.3 !important;
}
.spec-block-body > *:first-child font[size="5"],
.spec-block-body > *:first-child font[size="6"],
.spec-block-body > *:first-child font[size="7"] {
line-height: 1.15 !important;
display: inline-block;
vertical-align: top;
}
/* 4. 标题元素 h1-h6 默认 margin 巨大,首子位置强制清零 */
.spec-block-body > h1:first-child,
.spec-block-body > h2:first-child,
.spec-block-body > h3:first-child,
.spec-block-body > h4:first-child,
.spec-block-body > h5:first-child,
.spec-block-body > h6:first-child {
margin: 0 0 6px 0 !important;
padding: 0 !important;
}
/* spec-debug-v1: 调试模式 — 控制台跑 _debugSpec() 切换,各元素高亮 */
body.debug-spec-borders .spec-block { outline: 2px solid #FF3B30 !important; }
body.debug-spec-borders .spec-block-h { outline: 2px solid #FF9500 !important; background: rgba(255,149,0,0.08) !important; }
body.debug-spec-borders .cr-ver-tabs { outline: 2px solid #FFCC00 !important; background: rgba(255,204,0,0.1) !important; }
body.debug-spec-borders .spec-block-body { outline: 2px solid #34C759 !important; background: rgba(52,199,89,0.06) !important; }
body.debug-spec-borders .spec-block-body > * { outline: 1px dashed #007AFF !important; background: rgba(0,122,255,0.08) !important; }
body.debug-spec-borders .spec-block-body > *:first-child { outline: 2px solid #AF52DE !important; background: rgba(175,82,222,0.12) !important; }
body.debug-spec-borders::before {
content: '调试模式: 红=spec-block · 黄=tabs · 绿=body · 蓝=直接子 · 紫=第一个子 · 控制台跑 _debugSpec(false) 关掉';
position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
background: #000; color: #FFCC00; padding: 8px 14px; font-size: 12px; text-align: center;
}
/* 版本 tab 上的 × 删除按钮 */
.cr-ver-tab .ver-del-x,
.cr-ver-tab .ver-edit-x {
background: transparent; border: none; color: var(--ink-mute);
padding: 0 2px; margin-left: 2px; font-size: 11px; cursor: pointer;
border-radius: 3px; line-height: 1; opacity: 0.6;
}
.cr-ver-tab .ver-del-x:hover { background: rgba(255,59,48,0.12); color: var(--danger,#D70015); opacity: 1; }
.cr-ver-tab .ver-edit-x:hover { background: var(--apple-blue-bg,#E5F0FF); color: var(--apple-blue,#007AFF); opacity: 1; }
.cr-ver-tab.active .ver-del-x,
.cr-ver-tab.active .ver-edit-x { opacity: 0.8; }
.spec-block-body.historic {
background: #FAFAFC;
color: var(--ink-soft);
border-top: 1px dashed var(--warn-bg, #FFF1E0);
}
.cr-historic-banner {
background: var(--warn-bg, #FFF1E0);
color: var(--warn, #B25400);
padding: 6px 12px;
border-radius: 6px;
font-size: 11.5px;
margin-bottom: 10px;
font-weight: 500;
}
.spec-block.is-pending {
border-color: var(--warn-border);
background: var(--warn-bg);
}
.spec-block-h {
display: flex; align-items: center; gap: 8px;
padding: 9px 12px;
background: var(--bg-sunken, #fafafa);
border-bottom: 1px solid var(--border, #e5e5ea);
}
.spec-block.is-pending .spec-block-h {
background: transparent;
border-bottom-color: var(--warn-border);
}
.spec-block-h .title { font-size: 12.5px; font-weight: 600; color: var(--ink, #1d1d1f); }
.spec-block-h .who { font-size: 11px; color: var(--ink-faint, #86868b); }
.spec-block-h .right-controls { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.spec-block-h .pen {
width: 24px; height: 24px;
display: grid; place-items: center;
color: var(--ink-faint, #86868b);
border-radius: 5px;
cursor: pointer;
background: transparent; border: 0;
font-size: 14px;
}
.spec-block-h .pen:hover { background: var(--bg-sunken, #f0f0f3); color: var(--ink, #1d1d1f); }
.spec-block-body {
padding: 11px 13px;
font-size: 13px; color: var(--ink, #1d1d1f);
white-space: pre-wrap;
line-height: 1.62;
}
.spec-block-body.mono {
font-family: ui-monospace, "SF Mono", Menlo, "PingFang SC", monospace;
font-size: 12.5px;
line-height: 1.7;
}
.spec-block-body.is-empty {
color: var(--ink-faint, #86868b);
}
/* === 面料价表(2026-05-13 报价系统 v2A)=== */
.fabric-price-table-wrap {
border-top: 1px solid var(--line);
padding: 10px 13px 12px;
background: rgba(255,255,255,0.55);
overflow-x: auto;
}
.spec-block.is-pending .fabric-price-table-wrap {
border-top-color: var(--warn-border);
background: rgba(255,251,242,0.6);
}
.fabric-price-table-head {
display: flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
margin-bottom: 6px;
}
.fabric-price-table-head .who {
font-size: 10.5px; color: var(--ink-mute); font-weight: 400;
}
.fabric-price-table-head .count {
margin-left: auto; font-size: 10.5px; color: var(--ink-mute);
}
.fabric-price-table {
width: 100%; border-collapse: collapse;
background: transparent;
font-size: 13px;
min-width: 620px;
}
.fabric-price-table thead th {
padding: 4px 8px 8px; text-align: left; font-weight: 500;
font-size: 10.5px; color: var(--ink-mute);
background: transparent;
letter-spacing: 0.5px; text-transform: uppercase;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.spec-block.is-pending .fabric-price-table thead th {
color: var(--warn);
border-bottom-color: rgba(184,134,11,0.18);
}
.fabric-price-table tbody td {
padding: 4px 8px; border-top: 1px solid rgba(0,0,0,0.05);
color: var(--ink); vertical-align: middle;
}
.spec-block.is-pending .fabric-price-table tbody td {
border-top-color: rgba(184,134,11,0.15);
}
.fabric-price-table tbody tr:first-child td { border-top: 0; }
.fabric-price-table tbody tr { transition: background 0.15s; }
.fabric-price-table tbody tr:hover { background: rgba(0,0,0,0.02); }
.spec-block.is-pending .fabric-price-table tbody tr:hover { background: rgba(255,251,242,0.55); }
.fabric-price-table td.col-supplier { color: var(--ink-soft); }
.fabric-price-table td.col-supplier-empty { color: var(--ink-mute); font-style: italic; }
.fabric-price-table td.col-price { text-align: right; font-weight: 500; width: 86px; white-space: nowrap; }
.fabric-price-table td.col-del { text-align: center; width: 28px; }
.fabric-price-table .del-btn {
width: 22px; height: 22px; font-size: 14px; line-height: 1;
display: inline-grid; place-items: center;
color: transparent; cursor: pointer;
border: 0; background: transparent; border-radius: 6px;
transition: color 0.15s, background 0.15s;
}
.fabric-price-table tbody tr:hover .del-btn { color: var(--ink-mute); }
.fabric-price-table .del-btn:hover { background: var(--danger-bg); color: var(--danger); }
.fabric-price-table .cell-input {
border: 0; border-radius: 6px;
padding: 5px 7px; font-size: 13px;
background: transparent; color: var(--ink);
font-family: inherit; outline: none;
transition: background 0.15s, box-shadow 0.15s;
}
.fabric-price-table .cell-input:hover {
background: rgba(0,0,0,0.03);
}
.fabric-price-table .cell-input:focus {
background: var(--bg-elevated, #fff);
box-shadow: 0 0 0 2px var(--apple-blue-bg, rgba(0,122,255,0.18));
}
.fabric-price-table .cell-input::placeholder { color: var(--ink-mute); opacity: 0.65; }
.fabric-price-table .cell-input.price-input { width: 62px; text-align: right; font-weight: 500; }
.fabric-price-table .cell-input.color-input { min-width: 100px; max-width: 145px; }
.fabric-price-table td.col-color { font-weight: 600; white-space: nowrap; }
.fabric-price-table .cell-input.name-input { width: 100%; min-width: 120px; }
.fabric-price-table .cell-input.supplier-input { width: 100%; min-width: 90px; color: var(--ink-soft); }
.fabric-price-table .currency-sym { color: var(--ink-mute); margin-right: 2px; font-weight: 400; }
.fabric-price-toolbar {
display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap;
}
.fabric-price-toolbar .fp-btn {
background: transparent; color: var(--ink-soft);
border: 0; border-radius: 8px;
padding: 6px 12px; font-size: 12.5px; font-weight: 500;
cursor: pointer; transition: background 0.15s, color 0.15s;
font-family: inherit;
}
.fabric-price-toolbar .fp-btn:hover { background: rgba(0,0,0,0.04); color: var(--ink); }
.fabric-price-toolbar .fp-btn.primary {
color: var(--apple-blue);
background: rgba(0,122,255,0.08);
}
.fabric-price-toolbar .fp-btn.primary:hover { background: rgba(0,122,255,0.14); }
.fabric-price-toolbar .fp-hint {
font-size: 11px; color: var(--ink-mute);
}
.fabric-price-empty {
padding: 16px 12px; text-align: center;
font-size: 11.5px; color: var(--ink-mute);
background: var(--bg-elevated, #fff);
border: 1px dashed var(--line); border-radius: 6px;
}
.spec-block.is-pending .fabric-price-empty {
background: rgba(255,251,242,0.6); border-color: var(--warn-border);
}
/* 防止全局 .empty::before 圆球波及 spec block(以前用 .empty 撞了全局) */
.spec-block-body.is-empty::before { content: none !important; display: none !important; }
.spec-block.is-editing .spec-block-body { padding: 0; }
.spec-block.is-editing textarea {
width: 100%; border: 0; outline: none;
padding: 11px 13px;
font: inherit; font-family: inherit; font-size: 13px;
background: var(--accent-soft, #e8f1fd);
resize: vertical; min-height: 100px;
line-height: 1.62;
}
.spec-block.is-editing textarea.mono {
font-family: ui-monospace, "SF Mono", Menlo, "PingFang SC", monospace;
}
.spec-block-edit-foot {
display: none;
justify-content: flex-end; gap: 6px;
padding: 8px 12px;
background: var(--bg-sunken, #fafafa);
border-top: 1px solid var(--border, #e5e5ea);
}
.spec-block.is-editing .spec-block-edit-foot { display: flex; }
.spec-btn-mini {
font-size: 12px; font-weight: 500;
padding: 4px 10px;
border-radius: 6px;
border: 1px solid var(--border-strong, #d2d2d7);
background: var(--surface, #fff);
cursor: pointer;
color: var(--ink, #1d1d1f);
}
.spec-btn-mini.primary {
background: var(--accent, #0071e3);
color: #fff;
border-color: var(--accent, #0071e3);
}
/* 抽屉顶部 pill */
.fabric-pill {
background: var(--warn-bg) !important;
color: var(--warn-ink) !important;
font-weight: 600 !important;
}
/* 卡片 ⚠ 缺面料 徽章 */
.badge-fabric-warn {
background: var(--warn-ink);
color: #fff !important;
font-weight: 700 !important;
font-size: 10.5px;
padding: 2px 7px;
border-radius: 4px;
display: inline-flex; align-items: center; gap: 3px;
letter-spacing: 0.02em;
}
.style-row.lacks-fabric,
.today-card.lacks-fabric,
.grid-card.lacks-fabric {
background: linear-gradient(180deg, var(--warn-bg) 0%, var(--surface, #fff) 24%);
}
/* 警示型 filter chip group(开发追踪顶部) — toggle, 视觉对比强化 */
.filter-group.alert-group {
background: transparent;
border: 1px solid var(--warn-border);
border-radius: 999px;
padding: 2px;
display: inline-flex;
}
.filter-group.alert-group .filter-btn {
color: var(--warn-ink);
background: transparent;
font-weight: 500;
transition: background 0.14s ease-out, color 0.14s ease-out;
}
.filter-group.alert-group .filter-btn:hover {
background: var(--warn-bg);
}
/* 激活态:深琥珀填充 + 白字 + 阴影,跟未激活差异巨大 */
.filter-group.alert-group .filter-btn.active {
background: var(--warn-ink) !important;
color: #fff !important;
font-weight: 600;
box-shadow: 0 1px 3px oklch(50% 0.18 50 / 0.35);
}
.filter-group.alert-group:has(.filter-btn.active) {
background: var(--warn-bg);
border-color: var(--warn-ink);
}