/* ============================================================
   style.css —— 全局样式（Ant Design 风格标准化，2026-11-09 重构）
   ============================================================
   设计规范：
   · 所有颜色集中在 :root 的 CSS 变量里；深浅主题只换变量（html[data-theme]），
     切换后所有组件同步变色，无遗漏。
   · 浅色：页面背景 #f5f7fa、卡片纯白、边框浅灰；
     深色：页面背景 #141414、卡片 #1f1f1f、边框深灰描边（禁止纯黑底）。
   · 间距按 8px 栅格（4/8/12/16/24/32），圆角统一 4px（小件）/ 6px（容器）。
   · 文字层级：页面大标题 20px > 模块标题 15~16px > 正文 14px > 辅助 12~13px，
     辅助文字统一弱化（--text-3）。
   · 业务逻辑、数据、路由、主题切换能力完全保留，仅改视觉层；
     JS 依赖的 class 名（tables.js / common.js 渲染契约）全部原样保留。
   ============================================================ */

:root {
  /* —— 界面色（深色主题，AntD dark 风格）—— */
  --bg: #141414;                 /* 页面背景（深灰，非纯黑） */
  --surface: #1f1f1f;            /* 卡片/面板背景（次深灰） */
  --surface-2: #262626;          /* 表头/输入框/次级填充 */
  --hover: #2e2e2e;              /* 悬停高亮（表格行/列表项） */
  --input-bg: #262626;           /* 输入控件底色 */
  --bg-soft: #1a1a1a;            /* 日历周末列底色 */
  --bg-softer: #171717;          /* 日历相邻月格子底色 */
  --text: rgba(255, 255, 255, 0.88);   /* 主文字 */
  --text-2: rgba(255, 255, 255, 0.65); /* 次级文字 */
  --text-3: rgba(255, 255, 255, 0.45); /* 弱化文字/占位符 */
  --border: #303030;             /* 边框（深灰描边） */
  --border-strong: #434343;      /* 悬停时加深的边框 */
  --accent: #1668dc;             /* 主色：品牌蓝（深色主题降亮度保对比度） */
  --accent-hover: #3c89e8;
  --danger: #dc4446;             /* 危险色 */
  --danger-hover: #5f3234;
  --success: #49aa19;            /* 成功色 */
  --warning: #d89614;            /* 警示色 */
  /* 状态标签文字色（标签底色用 color-mix 按比例混合，同一变量两主题通用） */
  --tag-info-text: #6cb2ff;      /* 生产中：蓝 */
  --tag-success-text: #95de64;   /* 已完成：绿 */
  --tag-danger-text: #ff7875;    /* 机器故障暂停：红 */
  --tag-warning-text: #ffd666;   /* 待生产：橙黄 */
  --tag-gray-text: #a6a6a6;      /* 订单取消：灰 */
  --tag-orange-text: #ffb65c;    /* 缺料暂停：橙 */
  /* —— 通用原子 —— */
  --radius: 6px;                 /* 容器圆角（卡片/按钮/输入框） */
  --radius-sm: 4px;              /* 小件圆角（标签/页码/小按钮） */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.20); /* 卡片柔和阴影 */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.36), 0 8px 24px rgba(0, 0, 0, 0.28); /* 弹窗/下拉 */
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238c8c8c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ============================================================
   浅色主题（导航栏右上角 ☀️/🌙 按钮切换，选择存在 localStorage）
   和深色主题一一对应：同一套变量、镜像的明暗关系，
   页面所有组件都吃这套变量，切换后全局同步变配色。
   ============================================================ */
html[data-theme="light"] {
  --bg: #f5f7fa;                 /* 页面背景：浅灰 */
  --surface: #ffffff;            /* 卡片/面板：纯白 */
  --surface-2: #fafafa;          /* 表头/输入框/次级填充 */
  --hover: #f0f2f5;              /* 悬停高亮 */
  --input-bg: #ffffff;           /* 输入控件底色 */
  --bg-soft: #f7f9fc;            /* 日历周末列底色 */
  --bg-softer: #f0f2f6;          /* 日历相邻月格子底色 */
  --text: rgba(0, 0, 0, 0.88);   /* 主文字 */
  --text-2: rgba(0, 0, 0, 0.65); /* 次级文字 */
  --text-3: rgba(0, 0, 0, 0.45); /* 弱化文字/占位符 */
  --border: #e4e7ed;             /* 边框：浅灰 */
  --border-strong: #c5cbd4;      /* 悬停时加深的边框 */
  --accent: #1677ff;             /* 主色：品牌蓝 */
  --accent-hover: #4096ff;
  --danger: #ff4d4f;
  --danger-hover: #ff7875;
  --success: #52c41a;
  --warning: #faad14;
  --tag-info-text: #0958d9;      /* 生产中：蓝 */
  --tag-success-text: #389e0d;   /* 已完成：绿 */
  --tag-danger-text: #cf1322;    /* 机器故障暂停：红 */
  --tag-warning-text: #ad6800;   /* 待生产：橙黄 */
  --tag-gray-text: #5c6470;      /* 订单取消：灰 */
  --tag-orange-text: #d46b08;    /* 缺料暂停：橙 */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 12px 32px rgba(15, 23, 42, 0.10);
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a919f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 浅色主题下原生日期控件的日历图标不用反白（深色主题靠 invert(1) 反白） */
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: none; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); } /* 深色主题反白 */

/* ============================================================
   基础重置与全局
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.4; /* 紧凑排版：全站基础行高收窄 */
}

.hidden { display: none !important; }

/* 所有可交互元素统一柔和过渡（克制：0.2s，不影响使用效率） */
button, input, select, textarea, a { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; }
button { font-family: inherit; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   卡片容器（全站统一：轻微边框 + 柔和阴影 + 一致内边距）
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px; /* 紧凑 */
  border-bottom: 1px solid var(--border);
}
.card-title { font-size: 15px; font-weight: 600; color: var(--text); }
.card-body { padding: 12px; }

/* 页面内多张卡片之间的留白（紧凑） */
.app-main > .card + .card,
.app-main > .panel + .card,
.app-main > .card + .panel { margin-top: 12px; }
.card + .card { margin-top: 12px; }

/* 卡片内部的表格/工具条去外框，与卡片融为一体 */
.card .table-wrap { border: none; border-radius: 0; box-shadow: none; border-top: 1px solid var(--border); }
.card .table-wrap:first-child { border-top: none; }
.card .toolbar {
  border: none; border-radius: 0; box-shadow: none;
  background: transparent; padding: 0 0 16px; margin-bottom: 0;
}

/* 通用面板（旧 .panel 兼容：表单区、统计区等直接放里面的卡片容器） */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 12px;
}

/* ============================================================
   文字层级
   ============================================================ */
.page-title { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.page-subtitle { font-size: 13px; color: var(--text-3); margin: 0 0 12px; }
.section-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.placeholder-note { font-size: 13px; color: var(--text-3); }
.empty { color: var(--text-3); font-size: 14px; padding: 24px; text-align: center; }
.empty-panel {
  padding: 24px;
  text-align: center;
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   按钮（主/次/文本/危险 四态统一：高度 32px、圆角 6px、hover/禁用一致）
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px; /* 紧凑 */
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.btn:hover { color: var(--accent); border-color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; color: var(--text); border-color: var(--border); }

.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-primary:disabled { background: var(--accent); border-color: var(--accent); color: #fff; opacity: 0.5; }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: #fff; }

.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(1.08); color: #fff; }

/* 文本/幽灵按钮：无边框，悬停淡色背景 */
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--hover); color: var(--text); border-color: transparent; }

.btn-sm { height: 22px; padding: 0 8px; font-size: 13px; }
.btn-block { width: 100%; }

/* 键盘可达性：聚焦环与输入框一致 */
.btn:focus-visible,
.tab-btn:focus-visible,
.status-tab:focus-visible,
.admin-menu-item:focus-visible,
.chip:focus-visible,
.page-btn:focus-visible,
.account-card:focus-visible,
.btn-mini:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset: 2px;
}

/* ============================================================
   输入控件（输入框/搜索框/下拉选择/日期：统一高度 32px、边框、
   聚焦高亮环、hover 边框加深、下拉箭头位置规范）
   ============================================================ */
.search-input,
.field input,
.field select,
.field textarea {
  height: 28px; /* 紧凑 */
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.field textarea { height: auto; padding: 6px 10px; resize: vertical; }
.search-input::placeholder,
.field input::placeholder,
.field textarea::placeholder { color: var(--text-3); }

.search-input:hover,
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--border-strong); }
/* 聚焦：主色边框 + 淡色光环（AntD focus ring） */
.search-input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* 下拉选择：隐藏原生箭头，换成主题色小箭头，位置统一在右侧 */
.search-select,
.page-size-select,
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  cursor: pointer;
}
.search-select { min-width: 120px; }

/* 搜索框一键清空：定位容器 + 右侧小 ×（有内容才显示，见 common.js initSearchClear） */
.search-wrap { position: relative; display: inline-flex; min-width: 220px; }
.search-wrap .search-input { width: 100%; min-width: 0; }
.combo-box .search-wrap { width: 100%; min-width: 0; }
.search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: none;
}
.search-clear:hover { background: var(--hover); color: var(--text); }

/* ============================================================
   状态标签 Tag（AntD 风格：淡色底 + 同色描边 + 深色文字）
   配色标准：待生产=橙黄 / 生产中=蓝 / 已完成=绿 /
             订单取消=灰 / 缺料暂停=橙 / 机器故障暂停=红
   ============================================================ */
.tag {
  display: inline-block;
  padding: 1px 6px; /* 紧凑 */
  font-size: 12px;
  line-height: 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}
.tag-info, .tag-success, .tag-danger, .tag-warning, .tag-gray, .tag-orange {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-color: color-mix(in srgb, currentColor 40%, transparent);
}
.tag-info { color: var(--tag-info-text); }         /* 蓝：生产中 */
.tag-success { color: var(--tag-success-text); }   /* 绿：已完成 */
.tag-danger { color: var(--tag-danger-text); }     /* 红：机器故障暂停 */
.tag-warning { color: var(--tag-warning-text); }   /* 橙黄：待生产 */
.tag-gray { color: var(--tag-gray-text); }         /* 灰：订单取消 */
.tag-orange { color: var(--tag-orange-text); }     /* 橙：缺料暂停 */
/* 无颜色兜底（未知状态） */
.tag:not(.tag-info):not(.tag-success):not(.tag-danger):not(.tag-warning):not(.tag-gray):not(.tag-orange) {
  border-color: var(--border);
  color: var(--text-2);
}

/* 小圆点（图例/表格里代表销售员的颜色点） */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ============================================================
   数据表格（表头背景区分 + 列头加粗 + hover 行高亮 + 边框统一）
   ============================================================ */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: auto;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
  text-align: left;
  padding: 6px 12px; /* 紧凑：行高压缩、信息密度提升 */
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td { padding: 6px 12px; border-bottom: 1px solid var(--border); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background-color 0.15s ease; }
.data-table tbody tr:hover { background: var(--hover); }
.data-table .empty { text-align: center; color: var(--text-3); padding: 24px; cursor: default; }

/* ===== 两个页面的表格列宽分配（只调列宽与换行，不动功能与数据）=====
   品名/产品名称是长文本列 → 优先给横向空间，正常横排、允许自然换行；
   需求量/现存量等短数字列收窄；其余列在剩余空间里均分。
   table-layout: fixed 让列宽严格按比例生效，不被长编号撑变形；
   长编号超出列宽时断行换行，不横向溢出。
   注意：状态标签（.tag）必须整体一行显示 —— 给它加 white-space: nowrap，
   否则 break-word 会把胶囊宽度算成单个字符宽，文字竖着堆成条。 */

/* 订单追踪页：订单卡片里的产品明细表 */
#order-list .data-table { table-layout: fixed; }
#order-list .data-table th { white-space: normal; }
#order-list .data-table td { overflow-wrap: break-word; }
#order-list .data-table .tag { white-space: nowrap; }
#order-list .col-productName { width: 28%; }
#order-list .col-demandQty,
#order-list .col-stockQty,
#order-list .col-planQty,
#order-list .col-passQty,
#order-list .col-midCapacity { width: 5.5%; }
#order-list .col-unsoldQty { width: 6%; }
#order-list .col-productionNo { width: 10.5%; }
#order-list .col-prodStatus { width: 7.5%; }
#order-list .col-startDate,
#order-list .col-estFinishDate,
#order-list .col-finishDate { width: 7%; }

/* 生产单页：主表格 */
#data-table .data-table { table-layout: fixed; }
#data-table .data-table th { white-space: normal; }
#data-table .data-table td { overflow-wrap: break-word; }
#data-table .data-table .tag { white-space: nowrap; }
/* 13 列（含计划开工日期/计划完工日期），合计 100%：
   品名 23%、生产单号 10%、所属销售单 10%、状态 7%、配件编号 7%、
   计划/合格数量各 5%、六个日期列各 5.5% */
#data-table .col-productName { width: 23%; }
#data-table .col-planQty,
#data-table .col-passQty { width: 5%; }
#data-table .col-status { width: 7%; }
#data-table .col-orderNo { width: 10%; }
#data-table .col-salesOrderNo { width: 10%; }
#data-table .col-partNo { width: 7%; }
#data-table .col-startDate,
#data-table .col-expectDelivery,
#data-table .col-estDelivery,
#data-table .col-planStartDate,
#data-table .col-planFinishDate,
#data-table .col-finishDate { width: 5.5%; }

/* ===== 生产单页 + 系统管理·产品产能表/品检单：表头吸顶（纯 CSS position: sticky，不加任何 JS）=====
   1) 外层 .table-wrap 默认 overflow:auto 会成为 sticky 的"滚动容器"，
      表头只会相对容器吸附、页面一滚就跟着走 → 改成 overflow:clip
      （clip 只裁切、不产生滚动容器；三个表格都是 width:100%，实测不会横向溢出）。
   2) top: 56px = 顶部固定导航栏高度，表头正好贴在导航下沿，不被遮挡。
   3) 背景必须是不透明的实色（--surface-2），滚动时内容行文字才不会被透出来。
   4) z-index：表头 10 高于内容行，低于导航栏 100，互不遮挡。
   5) border-collapse: collapse 的边框由表格统一绘制，吸附时表头底线会留在原位，
      改用 inset box-shadow 画同色底线，吸附前后都保持 1px 分界线。 */
#data-table,
#capacity-table,
#inspection-table { overflow: clip; }
#data-table .data-table thead th,
#capacity-table .data-table thead th,
#inspection-table .data-table thead th {
  position: sticky;
  top: 56px;
  z-index: 10;
  background: var(--surface-2);
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--border);
}

/* ============================================================
   标签页 Tabs（选中带下划线高亮，未选中弱化，切换过渡柔和）
   ============================================================ */
.tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  padding: 8px 4px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* ============================================================
   筛选条 / 工具条（列表页统一的筛选卡片）
   ============================================================ */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px; /* 紧凑 */
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.toolbar h2 { font-size: 16px; }
.toolbar-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.chip:hover { color: var(--accent); border-color: var(--accent); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================
   分页器（四个列表页统一：左侧每页条数 + 中间页码 + 右侧总数）
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0 8px; /* 紧凑 */
  padding: 8px 0;
}
.page-size-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3);
  flex-shrink: 0;
}
.page-size-select {
  height: 24px;
  padding: 0 28px 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text-2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.page-size-select:hover { border-color: var(--border-strong); }
.page-size-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent); }

.page-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.page-btn {
  height: 24px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.page-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-num { min-width: 24px; padding: 0 6px; text-align: center; }
.page-num.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  cursor: default;
}
.page-num.active:hover { color: #fff; border-color: var(--accent); }
.page-ellipsis { padding: 0 2px; color: var(--text-3); }
.page-info { font-size: 13px; color: var(--text-3); flex-shrink: 0; }

/* ============================================================
   弹窗（浏览器原生 <dialog>）
   ============================================================ */
.modal {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px; /* 紧凑 */
  width: min(520px, 92vw);
  box-shadow: var(--shadow-md);
}
.modal::backdrop { background: rgba(0, 0, 0, 0.55); }
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.modal-head h3 { font-size: 16px; font-weight: 600; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* 详情弹窗里的信息两列布局（标签列 + 内容列） */
.detail-grid {
  display: grid;
  grid-template-columns: 72px 1fr;
  row-gap: 8px;
  font-size: 14px;
}
.detail-grid .k { color: var(--text-3); }
.detail-grid .v { word-break: break-all; white-space: pre-wrap; }

/* 编辑产品产能弹窗：编号/品名只读信息行 + 底部提示 */
.capacity-modal-info {
  display: grid;
  grid-template-columns: 44px 1fr;
  row-gap: 4px;
  column-gap: 10px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.capacity-modal-label { color: var(--text-3); font-size: 13px; }
.capacity-modal-tip { font-size: 12px; color: var(--text-3); margin: -4px 0 4px; }
#edit-capacity-modal input::placeholder { font-size: 12px; color: var(--text-3); }

/* ============================================================
   表单
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-2);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ============================================================
   应用外壳（登录后的固定顶部导航栏 + 页面布局）
   ============================================================ */
.app-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.app-nav-left { display: flex; align-items: center; gap: 24px; height: 100%; }
.app-nav-logo { font-weight: 600; white-space: nowrap; }

.app-nav-menu { display: flex; gap: 4px; height: 100%; }
.app-nav-link {
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.app-nav-link:hover { color: var(--text); }
.app-nav-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.app-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-2);
  font-size: 14px;
  white-space: nowrap;
}

/* 主题切换按钮（导航栏右上角、用户名左侧） */
.theme-toggle-btn {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle-btn:hover { border-color: var(--border); background: var(--hover); }

/* 页面主体：顶部留出固定导航栏的高度；左右统一 24px 边距，内容不贴浏览器边缘 */
.app-main { max-width: 1280px; margin: 72px auto 24px; padding: 0 24px; }
.page { max-width: 1280px; margin: 16px auto 24px; padding: 0 24px; }

/* ============================================================
   顶栏（admin.html 旧式外壳，与 app-nav 同一视觉语言）
   ============================================================ */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-title { font-weight: 600; font-size: 15px; }
.topbar-right { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 14px; }

/* ============================================================
   状态标签页（订单追踪/插单评估：全部 / 待交货 / 暂缓交货 / 已交货）
   顶部选中带下划线高亮，未选中弱化
   ============================================================ */
.status-tabs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.status-tab {
  padding: 8px 4px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.status-tab:hover { color: var(--text); }
.status-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
/* 标签里的数量小圆角块 */
.status-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 4px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  text-align: center;
}
.status-tab.active .status-count {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

/* ============================================================
   折叠面板（插单评估底部：边框清晰，展开收起箭头规范）
   ============================================================ */
.rush-collapse { margin-top: 8px; }
.rush-collapse-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-family: inherit;
  color: var(--accent);
  cursor: pointer;
}
.rush-collapse-btn:hover { text-decoration: underline; }
.rush-collapse-body {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-2);
}
.rush-collapse-body p { margin: 0 0 6px; }
.rush-collapse-body p:last-child { margin-bottom: 0; }

/* ============================================================
   排期预估页
   ============================================================ */
/* 表单区（卡片一）：配件清单动态行 */
.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.form-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-2);
}
.form-item .search-input { min-width: 160px; }
.form-item-half { flex: 1 1 0; min-width: 200px; }
.form-item-half .search-input { width: 100%; }

/* 多配件动态行：产品下拉（撑满）+ 数量（固定窄框）+ 删除按钮 */
.part-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.part-row .part-combo { flex: 1; min-width: 0; }
.part-row .part-qty { width: 130px; min-width: 0; flex: none; }
.part-del-btn {
  flex: none;
  width: 28px;
  height: 28px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.part-del-btn:hover { color: var(--danger); border-color: var(--danger); }
.parts-actions { margin-bottom: 8px; }

/* 可搜索下拉（产品选择）：浮层卡片 + hover 高亮 */
.combo-box { position: relative; }
.combo-box .search-input { width: 100%; min-width: 220px; }
.combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: none;
}
.combo-list.open { display: block; }
.combo-item {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.combo-item:hover,
.combo-item.highlighted {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}
.combo-empty {
  padding: 12px;
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  cursor: default;
}

/* 预估结果：数值放大突出、说明文字弱化 */
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.result-card:hover { border-color: var(--border-strong); }
.result-label { font-size: 12px; color: var(--text-3); }
.result-value { font-size: 24px; font-weight: 600; margin-top: 4px; color: var(--text); }
.result-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* 三行计算项（预估结果卡片内）：左说明 + 右数值，下方小字注释 */
.calc-list {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 12px;
  margin-top: 12px;
}
.calc-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.calc-row:last-child { border-bottom: none; }
.calc-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.calc-label { font-size: 13px; color: var(--text-2); }
.calc-value { font-size: 16px; font-weight: 600; color: var(--text); }
.calc-note { font-size: 12px; color: var(--text-3); }

/* 计算项彩色标识（2026-11-10 参考图：需生产天数区间 = 红框、消化全部需求天数 = 黄框）。
   颜色与状态标签同一套变量（--tag-danger-text / --tag-warning-text），
   深浅主题自动适配；底色/描边用 color-mix 按比例混合。 */
.calc-row.calc-red,
.calc-row.calc-yellow {
  border-radius: var(--radius-sm);
  margin: 8px 0;
  padding: 8px 10px;
}
.calc-row.calc-red {
  color: var(--tag-danger-text);
  background: color-mix(in srgb, var(--tag-danger-text) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tag-danger-text) 40%, transparent);
}
.calc-row.calc-yellow {
  color: var(--tag-warning-text);
  background: color-mix(in srgb, var(--tag-warning-text) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tag-warning-text) 45%, transparent);
}
.calc-row.calc-red .calc-label,
.calc-row.calc-red .calc-value,
.calc-row.calc-red .calc-note { color: var(--tag-danger-text); }
.calc-row.calc-yellow .calc-label,
.calc-row.calc-yellow .calc-value,
.calc-row.calc-yellow .calc-note { color: var(--tag-warning-text); }
.calc-row.calc-red .calc-note,
.calc-row.calc-yellow .calc-note { opacity: 0.85; }

/* 插单评估 */
.rush-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.rush-expect { font-size: 13px; color: var(--text-3); font-weight: 400; }
.rush-final { padding: 2px 0 12px; }
.rush-final-label { font-size: 13px; color: var(--text-3); }
.rush-final-date {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-3);
  margin-top: 2px;
}
.rush-final-date-ready { color: var(--accent); }
.rush-final-note { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* 同配件订单列表：每行五列（订单号 | 销售员 | 需求数量 | 期望交期 | 状态标签） */
.rush-list {
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-3);
  padding: 8px 4px;
}
.rush-cap-note { font-size: 12px; color: var(--text-3); padding: 8px 4px 2px; }
.rush-row {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.7fr 1.2fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}
.rush-row:hover { background: var(--hover); }
.rush-col { min-width: 0; }
.rush-col-order {
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rush-col-qty { text-align: right; }
.rush-new-finish { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* 逐配件明细表 */
.breakdown-wrap { margin-bottom: 0; }
#parts-breakdown td { font-size: 13px; }
#parts-breakdown .slow-row td { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ============================================================
   订单追踪页：订单折叠卡片（订单头 + 明细表）
   ============================================================ */
.order-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px; /* 紧凑 */
  overflow: hidden;
}
.order-group:hover { border-color: var(--border-strong); }
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px; /* 紧凑 */
  border-bottom: 1px solid var(--border);
}
.order-header-title { font-weight: 600; font-size: 15px; }
/* 订单号后面的状态标签群：和订单号之间留点间距，多个标签并排不挤 */
.order-header-title .tag { margin-left: 8px; }
.order-header-fields { display: flex; gap: 16px; flex-wrap: wrap; }
.order-field { font-size: 13px; color: var(--text-2); }
.order-field .f-label { color: var(--text-3); margin-right: 6px; }
/* 明细表嵌在卡片里：去掉外层圆角边框，只剩内表格 */
.table-wrap-flush { border: none; border-radius: 0; box-shadow: none; }

/* 订单五级分组的标题：状态 → 日期 → 销售员 */
.board-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 8px; /* 紧凑 */
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 15px;
}
.board-status:first-child { margin-top: 0; }
.board-date {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}
.board-date-label::before { content: '▸ '; color: var(--text-3); }
.board-sales {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px 16px;
  font-size: 13px;
  color: var(--text-2);
}
.board-sales-label::before { content: '◇ '; color: var(--text-3); }
.board-count {
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
}

/* ============================================================
   生产单页：状态统计条 + 超期标红
   ============================================================ */
.status-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
}
.status-summary .ss-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  background: var(--surface);
}
.status-summary .ss-count { font-weight: 600; color: var(--text); }

.text-danger { color: var(--danger); font-weight: 600; }
.text-approx { color: var(--text-3); } /* 推算值「约」标注：弱化颜色，与真实数据区分 */

/* ============================================================
   系统管理页：左侧二级菜单 + 右侧内容
   ============================================================ */
.admin-layout { display: flex; gap: 12px; align-items: flex-start; }
.admin-sidebar {
  width: 176px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.admin-menu-item {
  text-align: left;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.admin-menu-item:hover { background: var(--hover); color: var(--text); }
/* 选中态：品牌蓝淡色底 + 主色文字，清晰不刺眼 */
.admin-menu-item.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.admin-content { flex: 1; min-width: 0; }

/* 表格里的操作小按钮（编辑 / 停用 / 重置密码）：AntD 文本按钮风格 */
.btn-mini {
  padding: 1px 6px;
  margin-right: 4px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.btn-mini:last-child { margin-right: 0; }
.btn-mini:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.btn-mini-danger { color: var(--danger); }
.btn-mini-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* ============================================================
   系统管理：功能入口卡片 + 统计卡片 + 分布条
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.entry-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.entry-card:hover { border-color: var(--accent); }
.entry-card.active { border-color: var(--accent); }
.entry-icon { font-size: 26px; }
.entry-name { font-size: 14px; color: var(--text); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 12px;
  text-align: center;
}
.stat-num { font-size: 24px; font-weight: 700; color: var(--accent); }
.stat-label { margin-top: 4px; font-size: 13px; color: var(--text-3); }

.dist-item { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.dist-item:last-child { margin-bottom: 0; }
.dist-name { width: 90px; flex-shrink: 0; font-size: 13px; }
.dist-bar {
  flex: 1;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.dist-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }

/* 面板头部：左边标题 + 右边月份切换 */
.month-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.month-head .section-title { margin-bottom: 0; }
.month-switch { display: flex; align-items: center; gap: 10px; }
.month-label {
  min-width: 70px;
  text-align: center;
  font-size: 14px;
  color: var(--text-2);
}

.weekly-wrap { margin-bottom: 0; }
.usage-panel { margin-top: 0; }
.sync-alert { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.sync-alert .section-title { color: var(--danger); }

/* ============================================================
   登录页
   ============================================================ */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  width: min(400px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 24px;
}
.login-logo { font-size: 24px; font-weight: 600; text-align: center; margin-bottom: 2px; }
.login-sub {
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  margin-bottom: 16px;
}
.login-error {
  color: var(--danger);
  font-size: 13px;
  min-height: 18px;
  margin-bottom: 4px;
  text-align: center;
}
.login-hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-3);
}
.login-hint p { margin-bottom: 6px; }

/* 账号卡片：两张横向排列，点击自动填充上方表单 */
.account-cards { display: flex; gap: 8px; }
.account-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  cursor: pointer;
}
.account-card:hover {
  background: var(--hover);
  border-color: var(--accent);
}
.account-card.selected { border-color: var(--accent); }
.account-title { font-size: 13px; color: var(--text); font-weight: 600; }
.account-sub { font-size: 12px; color: var(--text-3); }

/* ============================================================
   右下角提示条（toast）
   ============================================================ */
#toast-box {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  box-shadow: var(--shadow-md);
  max-width: 320px;
  animation: toast-in 0.2s ease;
}
.toast-success { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--danger); }
.toast-info { border-left: 3px solid var(--accent); }
.toast-out { opacity: 0; transition: opacity 0.4s; }
@keyframes toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ============================================================
   日历（管理员排期页：月视图）
   ============================================================ */
.calendar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 12px;
}
.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.cal-title { font-size: 16px; font-weight: 600; }
.cal-nav { display: flex; gap: 8px; }

/* 7 列网格：星期表头 + 日期格 */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.cal-weekday {
  padding: 8px;
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cal-cell {
  min-height: 84px;
  padding: 4px;
  cursor: pointer;
  background: var(--surface);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s ease;
}
.cal-cell:hover { background: var(--hover); }
.cal-cell.weekend { background: var(--bg-soft); }
.cal-cell.outside { background: var(--bg-softer); }
.cal-cell.outside .cal-daynum { color: var(--text-3); }

.cal-daynum {
  font-size: 12px;
  color: var(--text-2);
  padding: 2px;
}
/* 今天：日期数字用主色圆形高亮 */
.cal-cell.today .cal-daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
}

.cal-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}

/* ============================================================
   排期条（pill）：颜色由 --pill-color 变量决定（JS 里设置）
   ============================================================ */
.pill {
  display: block;
  width: 100%;
  text-align: left;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 18px;
  border: none;
  border-left: 3px solid var(--pill-color, var(--accent));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--pill-color, var(--accent)) 16%, transparent);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill:hover { filter: brightness(1.2); }
.pill-more {
  color: var(--text-2);
  background: transparent;
  border-left-color: var(--border);
}

/* "当日详情"面板（点"+N 更多"后显示在日历下方） */
.day-panel {
  margin-top: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.day-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-2);
}
.day-panel-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.day-panel-list .pill { max-width: 600px; }