/* ============================================================================
   云掌柜 MLS —— 全站样式（设计令牌 + 组件层）
   ----------------------------------------------------------------------------
   约定：
   1) 颜色 / 圆角 / 阴影 / 间距一律走变量，禁止再写死色值（新代码）。
   2) 语义色只有 5 组：success(绿) / warning(橙) / danger(红) / info(蓝) / violet(紫)，
      每组含“主色 / 浅底 / 描边”三档，表格行状态、徽标、图表都从这里取。
   3) 数字（金额、数量）统一等宽：tabular-nums，保证右对齐后各位对齐。
   4) 本文件依赖 Bootstrap 5 提供栅格 / 模态框 / 下拉等基础能力，仅覆盖其外观。
   ============================================================================ */

:root {
  /* —— 品牌（深蓝 + 金）—— */
  --brand-900: #0b1626;
  --brand-800: #10203a;
  --brand-700: #16294a;
  --brand-600: #1c3556;
  --brand-500: #2a4a78;
  --brand-100: #e9eff8;
  --gold-500: #c9a86a;
  --gold-600: #b9954e;
  --gold-100: #f7f1e4;

  /* —— 中性 —— */
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #fafbfd;
  --surface-3: #f2f5f9;
  --border: #e5e9f0;
  --border-strong: #d5dce6;
  --text: #172033;
  --text-2: #5b6675;
  --text-3: #939db0;

  /* —— 语义色 —— */
  --success: #14883f;
  --success-bg: #e9f7ef;
  --success-line: #34a860;
  --warning: #b46a09;
  --warning-bg: #fdf3e5;
  --warning-line: #e08a1e;
  --danger: #cf2e2e;
  --danger-bg: #fdecec;
  --danger-line: #e04a4a;
  --info: #1f5fd0;
  --info-bg: #eaf1fd;
  --info-line: #3b7de0;
  --violet: #6d3fc4;
  --teal: #0f9b8e;
  --teal-bg: #e6f6f4;
  --teal-line: #23a99c;
  --violet-bg: #f2ecfd;
  --violet-line: #8a5fd8;

  /* —— 圆角 —— */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* —— 阴影 —— */
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, .08);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, .16);

  /* —— 布局 —— */
  --sidebar-w: 192px;
  --topbar-h: 60px;

  /* —— 字体 —— */
  --font-sans: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui,
    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

/* 用 clip 而非 hidden：hidden 会让 html 成为滚动容器，破坏侧栏 position:sticky */
html { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Bootstrap 弹窗打开时会往 body 写内联 overflow:hidden（滚动锁）。
   hidden 会把 body 变成滚动容器，破坏侧栏的 position:sticky——
   表现为打开弹窗后侧栏跟着内容滚走，左侧留一大截空白。
   改用 clip：同样锁住滚动，但不产生滚动容器。样式表 !important 可覆盖内联样式。 */
body.modal-open { overflow: clip !important; }

/* 金额 / 数量这类需要竖向对齐的数字统一等宽，避免右对齐后位与位错开 */
.num, .table td.text-end, .table th.text-end, .kpi-value, .stat-value, .data-table td.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ===== 顶栏 ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  min-width: 0;
  overflow: hidden;
  background: var(--brand-800);
  color: #fff;
  border-bottom: 2px solid var(--gold-600);
}
.topbar-brand {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 17px; font-weight: 700; letter-spacing: 1.5px;
  white-space: nowrap; color: #f0e0bd; min-width: 0; overflow: hidden;
}
.topbar-subtitle {
  font-size: 12px; font-weight: 400; letter-spacing: .5px;
  color: rgba(255, 255, 255, .5);
}
.topbar-user {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255, 255, 255, .8);
  flex-shrink: 0; white-space: nowrap;
}
.topbar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--brand-900); font-weight: 700; font-size: 12px; letter-spacing: .5px;
}
/* 顶栏右侧的次要操作：改为描边小按钮，替代原来的下划线链接 */
.topbar-user a,
.topbar-user button.topbar-link {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font: inherit; font-size: 12.5px;
  padding: 4px 10px; border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .04);
  cursor: pointer; transition: .15s;
}
.topbar-user a:hover,
.topbar-user button.topbar-link:hover {
  background: rgba(255, 255, 255, .14); color: #fff;
  border-color: rgba(255, 255, 255, .35);
}
.topbar-user form { display: inline; }

.sidebar-toggle {
  display: none;               /* 桌面端隐藏，仅窄屏显示（见响应式段） */
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: none; border-radius: var(--r-sm);
  background: transparent; color: #fff; cursor: pointer;
}
.sidebar-toggle:hover { background: rgba(255, 255, 255, .12); }

/* ===== 布局 ===== */
.layout { display: flex; min-height: calc(100vh - var(--topbar-h)); }

.sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  background: var(--brand-800);
  padding: 14px 10px;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  transition: margin-left .25s ease;
}
/* 桌面端折叠：侧栏移出，内容区占满 */
.layout.sidebar-collapsed .sidebar { margin-left: calc(-1 * var(--sidebar-w)); }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar .nav-link {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  color: rgba(255, 255, 255, .74);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .2px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.sidebar .nav-link svg { flex: 0 0 auto; opacity: .85; }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar .nav-link:hover svg { opacity: 1; }
/* 当前项：淡金底 + 左侧金色指示条（取代原来整块金色渐变） */
.sidebar .nav-link.active {
  background: rgba(201, 168, 106, .15);
  color: #f2e3c0;
  font-weight: 600;
}
.sidebar .nav-link.active svg { opacity: 1; color: var(--gold-500); }
.sidebar .nav-link.active::before {
  content: "";
  position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0;
  background: var(--gold-500);
}

.sidebar-backdrop { display: none; }

.content { flex: 1 1 auto; min-width: 0; background: transparent; }
.content-inner { padding: 20px 24px 32px; }

/* ===== 页头 ===== */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.page-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 20px; font-weight: 700; margin: 0; color: var(--text);
}
.page-title::before {
  content: ""; width: 4px; height: 18px; border-radius: 3px;
  background: linear-gradient(180deg, var(--gold-500), var(--gold-600));
}
.page-sub { font-size: 12.5px; color: var(--text-3); margin: 4px 0 0; }

/* 页面标题：内容区内的一级 h4 统一观感（含包在 flex 工具行里的标题） */
.content-inner h4 {
  font-size: 20px; font-weight: 700; margin: 0 0 16px;
  display: flex; align-items: center; gap: 9px; color: var(--text);
}
.content-inner h4::before {
  content: ""; width: 4px; height: 18px; border-radius: 3px; flex: 0 0 auto;
  background: linear-gradient(180deg, var(--gold-500), var(--gold-600));
}
.content-inner h4.mb-0 { margin-bottom: 0 !important; }

/* ===== 通用卡片 ===== */
.card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  padding: 12px 16px;
}
.card-title { font-size: 14.5px; font-weight: 600; margin-bottom: 10px; color: var(--text); }

/* ===== 看板 KPI 卡 ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.kpi-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 16px 18px 16px 20px;
  overflow: hidden;
}
/* 左侧语义色条：由 --kpi-accent 驱动（默认品牌蓝），改色只需覆盖一个变量 */
.kpi-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--kpi-accent, var(--brand-500));
}
.kpi-card:nth-child(1) { --kpi-accent: var(--brand-500); }
.kpi-card:nth-child(2) { --kpi-accent: var(--success-line); }
.kpi-card:nth-child(3) { --kpi-accent: var(--warning-line); }
.kpi-card:nth-child(4) { --kpi-accent: var(--danger-line); }
.kpi-card:nth-child(5) { --kpi-accent: var(--violet-line); }
.kpi-card:nth-child(6) { --kpi-accent: var(--info-line); }
.kpi-label { font-size: 12.5px; color: var(--text-2); letter-spacing: .2px; }
.kpi-value {
  font-size: 26px; font-weight: 700; line-height: 1.25; margin-top: 6px;
  color: var(--text);
}
.kpi-unit { font-size: 12px; font-weight: 500; color: var(--text-3); margin-left: 4px; }
.kpi-icon {
  position: absolute; right: 14px; top: 14px;
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--kpi-bg, var(--brand-100));
  color: var(--kpi-accent, var(--brand-500));
}
.kpi-card:has(.kpi-icon) .kpi-value { max-width: calc(100% - 34px); }
.kpi-card:nth-child(1) { --kpi-bg: var(--brand-100); }
.kpi-card:nth-child(2) { --kpi-bg: var(--success-bg); }
.kpi-card:nth-child(3) { --kpi-bg: var(--warning-bg); }
.kpi-card:nth-child(4) { --kpi-bg: var(--danger-bg); }
.kpi-card:nth-child(5) { --kpi-bg: var(--violet-bg); }
.kpi-card:nth-child(6) { --kpi-bg: var(--info-bg); }

/* ===== 列表页顶部统计卡（.stat-row 内的 .card）===== */
.stat-row > .col > .card,
.stat-row > [class*="col-"] > .card {
  position: relative;
  padding: 13px 16px 13px 18px;
  overflow: hidden;
  height: 100%;
}
.stat-row > .col > .card::before,
.stat-row > [class*="col-"] > .card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--stat-accent, var(--brand-500));
}
.stat-row > [class*="col-"]:nth-child(1) > .card { --stat-accent: var(--brand-500); }
.stat-row > [class*="col-"]:nth-child(2) > .card { --stat-accent: var(--success-line); }
.stat-row > [class*="col-"]:nth-child(3) > .card { --stat-accent: var(--warning-line); }
.stat-row > [class*="col-"]:nth-child(4) > .card { --stat-accent: var(--danger-line); }
.stat-row > [class*="col-"]:nth-child(5) > .card { --stat-accent: var(--violet-line); }
.stat-row > [class*="col-"]:nth-child(6) > .card { --stat-accent: var(--info-line); }
.stat-row > [class*="col-"]:nth-child(7) > .card { --stat-accent: var(--gold-600); }
.stat-row .card-body { padding: 0 !important; }
.stat-row .stat-label { font-size: 12.5px; color: var(--text-2); }
.stat-row .stat-value {
  font-size: 21px; font-weight: 700; line-height: 1.3; margin-top: 4px; color: var(--text);
}
.stat-row .stat-unit { font-size: 12px; font-weight: 500; color: var(--text-3); margin-left: 4px; }

/* ===== 图表加载占位（骨架屏）===== */
.chart-box::before, .donut-box::before {
  content: ""; position: absolute; inset: 6px; border-radius: var(--r);
  background: linear-gradient(90deg, var(--surface-3) 25%, #e9eef6 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: mls-shimmer 1.3s ease-in-out infinite;
  pointer-events: none; transition: opacity .25s ease;
}
.chart-box.is-ready::before, .donut-box.is-ready::before { opacity: 0; }
@keyframes mls-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ===== 图表网格 ===== */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.chart-cell { display: flex; flex-direction: column; min-width: 0; height: 330px; }
.chart-cell .card-title { flex: 0 0 auto; }
.chart-cell .chart-box { flex: 1 1 auto; min-height: 0; position: relative; }
.chart-cell .table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.chart-box { position: relative; height: 310px; overflow: hidden; }
.chart-box canvas { max-width: 100% !important; }
/* 环形图容器：随列宽自适应并保持正方形（Chart.js 在正方形里画环形才不变椭圆） */
.donut-box { position: relative; width: 100%; max-width: 260px; height: 260px; margin: 0 auto; }
@supports (aspect-ratio: 1 / 1) {
  .donut-box { height: auto; aspect-ratio: 1 / 1; }
}

/* ===== 筛选栏 / 视图切换 ===== */
.filter-bar { padding: 13px 16px; margin-bottom: 14px; }
.filter-row {
  display: flex; flex-wrap: wrap; gap: 12px 16px;
  align-items: center; justify-content: space-between;
}
.quick-group { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-btn {
  padding: 5px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  color: var(--text-2); text-decoration: none; font-size: 13px;
  background: var(--surface);
  transition: .15s;
}
.quick-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--text-3); }
.quick-btn.active {
  background: var(--brand-600); border-color: var(--brand-600);
  color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(28, 53, 86, .25);
}
.date-group { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); }
.date-group input[type=date] {
  padding: 5px 9px; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); font-family: inherit; font-size: 13px; color: var(--text);
}
.date-group input[type=date]:focus { outline: none; border-color: var(--brand-500); }

.view-switch { display: flex; gap: 4px; padding: 3px; background: var(--surface-3); border-radius: var(--r); flex-shrink: 0; }
.view-tab {
  padding: 6px 18px; border: none; background: transparent;
  border-radius: var(--r-sm); cursor: pointer; font-size: 13.5px;
  color: var(--text-2); transition: .15s; font-family: inherit;
}
.view-tab:hover { color: var(--text); }
.view-tab.active { background: var(--surface); color: var(--brand-600); font-weight: 600; box-shadow: var(--shadow); }

/* ===== 表格 ===== */
.table-responsive {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  background: var(--surface);
  overflow-x: auto;
}
.table {
  margin-bottom: 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  color: var(--text);
}
.table > :not(caption) > * > * { padding: 10px 12px; }
.table thead th {
  background: var(--surface-3);
  color: var(--text-2);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .2px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.table tbody td { vertical-align: middle; color: var(--text); border-bottom: 1px solid var(--surface-3); }
.table tbody tr:last-child td { border-bottom: none; }
/* 斑马纹 */
.table tbody tr:nth-child(even) { background: var(--surface-2); }
/* 悬浮高亮（低于状态行优先级） */
.table-hover tbody tr:hover { background: #eff5ff; }
/* 软化简边框，去掉外框（外框交给 .table-responsive） */
.table-bordered { border: none; }
.table-bordered th, .table-bordered td { border-left: none; border-right: none; border-top: none; }
.table-sm > :not(caption) > * > * { padding: 8px 10px; }

/* —— 状态行：低饱和浅底 + 左色条（作用于 td，避免被斑马纹/悬浮覆盖）—— */
.table tbody tr[class*="-row-"] > td { background-color: transparent; }
.table tbody tr.sales-row-blacklist > td,
.table tbody tr.table-row-blacklist > td { background-color: var(--danger-bg) !important; }
.table tbody tr.sales-row-returned > td { background-color: var(--info-bg) !important; }
.table tbody tr.sales-row-refund > td { background-color: var(--violet-bg) !important; }
.table tbody tr.table-row-green > td { background-color: var(--success-bg) !important; }
.table tbody tr.table-row-orange > td { background-color: var(--warning-bg) !important; }
/* 左侧色条：用首格 inset 阴影，避免影响布局 */
.table tbody tr.sales-row-blacklist > td:first-child,
.table tbody tr.table-row-blacklist > td:first-child {
  box-shadow: inset 3px 0 0 var(--danger-line);
}
.table tbody tr.sales-row-returned > td:first-child { box-shadow: inset 3px 0 0 var(--info-line); }
.table tbody tr.sales-row-refund > td:first-child { box-shadow: inset 3px 0 0 var(--violet-line); }
.table tbody tr.table-row-green > td:first-child { box-shadow: inset 3px 0 0 var(--success-line); }
.table tbody tr.table-row-orange > td:first-child { box-shadow: inset 3px 0 0 var(--warning-line); }

/* 销售单列表：退货/仅退/拉黑三列仅在桌面端隐藏（列序 14-16）。
   只隐藏不删除：勾选框仍是状态载体（右键菜单与顶部统计都从它读取）。
   手机/平板走卡片模式（见下方媒体查询），会把这三格重新显示为卡片字段。 */
@media (min-width: 992px) {
  .table[data-menu-type="sales"] > :is(thead, tbody) > tr > :is(th, td):nth-child(14),
  .table[data-menu-type="sales"] > :is(thead, tbody) > tr > :is(th, td):nth-child(15),
  .table[data-menu-type="sales"] > :is(thead, tbody) > tr > :is(th, td):nth-child(16) { display: none; }
}

/* 看板内的低库存表格 */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--surface-3);
  text-align: left; white-space: nowrap;
}
.data-table thead th {
  background: var(--surface-3); color: var(--text-2);
  font-weight: 600; font-size: 12.5px; position: sticky; top: 0;
}
.data-table tbody tr:nth-child(even) { background: var(--surface-2); }
.data-table tbody tr:hover { background: #eff5ff; }

/* ===== 行内操作按钮：图标化 + 悬浮显现 ===== */
/* 模板里按钮的文字保留在 DOM 中（便于读屏），视觉上由 font-size:0 隐藏，
   图标用 CSS mask 绘制，省去在每个模板里内联 SVG。 */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  font-size: 0; line-height: 0;
  border: 1px solid transparent; border-radius: var(--r-xs);
  background: transparent; color: var(--text-2); cursor: pointer;
  vertical-align: middle; transition: .15s;
}
.btn-icon::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.btn-icon.edit {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4l10-10-4-4L4 16z'/%3E%3C/svg%3E");
}
.btn-icon.del {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13'/%3E%3C/svg%3E");
}
.btn-icon:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.btn-icon.del { color: #a85151; }
.btn-icon.del:hover { background: var(--danger-bg); border-color: #f0cccc; color: var(--danger); }
/* 桌面端默认淡显、悬浮该行时提亮；触屏设备常显，避免找不到入口 */
@media (hover: hover) and (pointer: fine) {
  .table tbody tr .btn-icon { opacity: .62; }
  .table tbody tr:hover .btn-icon { opacity: 1; }
}
/* 复选框的加大点击区（app.js 会把表格里的复选框包一层 label） */
.cb-hit { display: inline-flex; align-items: center; justify-content: center; }

/* ===== 徽标 / 空状态 ===== */
.badge {
  font-weight: 500; font-size: 12px; padding: 3px 9px;
  border-radius: var(--r-pill); letter-spacing: .2px;
}
.badge-danger, .badge.bg-danger { background: var(--danger-bg) !important; color: var(--danger) !important; border: 1px solid var(--danger-line); }
.badge-warn, .badge.bg-warning { background: var(--warning-bg) !important; color: var(--warning) !important; border: 1px solid var(--warning-line); }
.badge-success, .badge.bg-success { background: var(--success-bg) !important; color: var(--success) !important; border: 1px solid var(--success-line); }
.badge-info, .badge.bg-info { background: var(--info-bg) !important; color: var(--info) !important; border: 1px solid var(--info-line); }
.badge.bg-secondary { background: var(--surface-3) !important; color: var(--text-2) !important; border: 1px solid var(--border-strong); }
.badge.bg-primary { background: var(--brand-100) !important; color: var(--brand-600) !important; border: 1px solid #b9cae2; }
.badge.bg-light { background: var(--surface-3) !important; color: var(--text-2) !important; border: 1px solid var(--border); }

.empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; color: var(--text-3); padding: 34px 16px;
}
.empty::before {
  content: "";
  width: 34px; height: 34px; border-radius: var(--r);
  background: var(--surface-3) no-repeat center / 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23939db0' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M9 4v16'/%3E%3C/svg%3E");
}

/* ===== 按钮（覆盖 Bootstrap 变量，确保主色生效）===== */
.btn {
  --bs-btn-font-size: 13.5px;
  --bs-btn-padding-y: .42rem;
  --bs-btn-padding-x: .85rem;
  --bs-btn-border-radius: var(--r-sm);
  font-family: inherit;
  font-weight: 500;
  transition: .15s;
}
.btn-sm { --bs-btn-font-size: 12.5px; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .65rem; --bs-btn-border-radius: var(--r-xs); }
.btn-primary {
  --bs-btn-bg: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-800);
  --bs-btn-active-border-color: var(--brand-800);
  --bs-btn-disabled-bg: var(--brand-500);
  --bs-btn-disabled-border-color: var(--brand-500);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-600);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-bg: var(--brand-600);
  --bs-btn-hover-border-color: var(--brand-600);
  --bs-btn-active-bg: var(--brand-700);
  --bs-btn-active-border-color: var(--brand-700);
  background: var(--surface);
}
.btn-outline-secondary {
  --bs-btn-color: var(--text-2);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-bg: var(--surface-3);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-border-color: var(--text-3);
  background: var(--surface);
}
.btn-outline-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-border-color: #f0cccc;
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
  background: var(--surface);
}
.btn-secondary {
  --bs-btn-bg: var(--surface-3);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-color: var(--text-2);
  --bs-btn-hover-bg: #e7ebf2;
  --bs-btn-hover-border-color: var(--text-3);
  --bs-btn-hover-color: var(--text);
}
.btn-link { --bs-btn-color: var(--brand-600); text-decoration: none; }
.btn-outline-success {
  --bs-btn-color: var(--success);
  --bs-btn-border-color: #bfe3cd;
  --bs-btn-hover-bg: var(--success);
  --bs-btn-hover-border-color: var(--success);
  background: var(--surface);
}
.btn-outline-warning {
  --bs-btn-color: var(--warning);
  --bs-btn-border-color: #f0dcb8;
  --bs-btn-hover-bg: var(--warning);
  --bs-btn-hover-border-color: var(--warning);
  background: var(--surface);
}

/* ===== 顶部选项卡 ===== */
.nav-tabs { border-bottom: 1px solid var(--border); gap: 4px; }
.nav-tabs .nav-link {
  border: none; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--text-2); padding: 8px 14px; font-size: 14px;
}
.nav-tabs .nav-link:hover { border-bottom-color: var(--border-strong); color: var(--text); }
.nav-tabs .nav-link.active {
  border-bottom-color: var(--gold-500); color: var(--brand-600);
  font-weight: 600; background: transparent;
}

/* ===== 表单 ===== */
.form-label { font-size: 12.5px; color: var(--text-2); margin-bottom: 5px; font-weight: 500; }
.form-control, .form-select {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: .42rem .7rem;
  background-color: var(--surface);
  transition: .15s;
}
/* 注意：.form-select 的右侧内边距是给下拉箭头留的（箭头画在 right:.75rem），
   不能用 padding 简写覆盖，否则箭头会压住文字（w-auto 的窄下拉最明显） */
/* 利润着色：负数红（text-danger）、零和正数蓝（自定义，替代 text-success） */
.text-profit { color: var(--info) !important; }

.form-select { padding-right: 2.25rem; }
.form-control-sm, .form-select-sm { font-size: 13px; border-radius: var(--r-xs); }
.form-control-sm { padding: .3rem .55rem; }
.form-select-sm { padding: .3rem .55rem; padding-right: 2rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(28, 53, 86, .12);
}
.form-control::placeholder { color: var(--text-3); }
.form-control[readonly] { background: var(--surface-3); color: var(--text-2); }
.form-check-input { border-color: var(--border-strong); cursor: pointer; }
.form-check-input:checked { background-color: var(--brand-600); border-color: var(--brand-600); }
.form-check-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(28, 53, 86, .12); }
.form-text { font-size: 12px; color: var(--text-3); }
.table input[type=checkbox] { width: 15px; height: 15px; vertical-align: middle; cursor: pointer; accent-color: var(--brand-600); }

/* ===== 分页 ===== */
.pagination { --bs-pagination-font-size: 13px; gap: 4px; margin: 2px 0 0; }
.pagination .page-link {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-2);
  padding: .3rem .6rem;
  min-width: 32px; text-align: center;
  background: var(--surface);
}
.pagination .page-link:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.pagination .page-item.active .page-link {
  background: var(--brand-600); border-color: var(--brand-600); color: #fff; font-weight: 600;
}
.pagination .page-item.disabled .page-link { background: var(--surface); color: var(--text-3); border-color: var(--border); }

/* ===== 模态框 / 提示条 ===== */
.modal-content { border: none; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--border); padding: 14px 18px; }
.modal-title { font-size: 15.5px; font-weight: 600; }
.modal-body { padding: 18px; }
.modal-footer { border-top: 1px solid var(--border); padding: 12px 18px; gap: 8px; }
.modal-backdrop.show { opacity: .38; }

.alert { border-radius: var(--r); border-width: 1px; font-size: 13.5px; padding: 11px 14px; }
.alert-success { background: var(--success-bg); border-color: var(--success-line); color: var(--success); }
.alert-info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-line); color: var(--warning); }
.alert-danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }

/* 统一的轻提示（替代原生 alert()） */
.mls-toast-wrap {
  position: fixed; right: 20px; bottom: 20px; z-index: 4000;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.mls-toast {
  display: flex; align-items: center; gap: 9px;
  min-width: 200px; max-width: 380px;
  padding: 11px 15px; border-radius: var(--r);
  background: var(--brand-800); color: #fff;
  font-size: 13.5px; box-shadow: var(--shadow-lg);
  animation: mls-toast-in .2s ease;
}
.mls-toast.ok { background: #0f5132; }
.mls-toast.err { background: #7f1d1d; }
.mls-toast.warn { background: #7c4a03; }
@keyframes mls-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 表单校验错误态 */
.form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--danger-line);
  background-image: none;
}
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(207, 46, 46, .12); }

/* ===== 工具类补充 ===== */
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-muted { color: var(--text-2) !important; }
.text-nowrap { white-space: nowrap; }
.text-dark { color: var(--text) !important; }
.bg-light { background: var(--surface-3) !important; }
.bg-white { background: var(--surface) !important; }
.table-light > :not(caption) > * > * { background: var(--surface-3); }
.table-secondary { --bs-table-bg: var(--surface-3); }
hr { border-color: var(--border); opacity: 1; }

/* ===== 登录页 ===== */
.login-page {
  margin: 0;
  min-height: 100vh;
  /* 品牌色淡染 + 右上/左下两块几何装饰，避免四周过于空白 */
  background:
    radial-gradient(520px 520px at 93% 4%, rgba(28, 53, 86, .09), transparent 60%),
    radial-gradient(460px 320px at 3% 97%, rgba(201, 168, 106, .18), transparent 58%),
    radial-gradient(900px 420px at 8% -10%, rgba(201, 168, 106, .20), transparent 62%),
    radial-gradient(760px 420px at 96% 108%, rgba(28, 53, 86, .12), transparent 60%),
    var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-wrap {
  display: flex;
  width: 100%;
  max-width: 880px;
  min-height: 520px;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: login-in .45s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes login-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .login-wrap { animation: none; }
}
.login-aside {
  flex: 0 0 42%;
  background: linear-gradient(160deg, var(--brand-700) 0%, var(--brand-800) 55%, var(--brand-900) 100%);
  color: #fff;
  padding: 44px 38px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.login-aside::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: .5;
}
/* 中段装饰：抽象销售趋势图，填补左栏留白并点题 */
.aside-art {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0 26px;
  opacity: .8;
}
.aside-art svg { width: 82%; max-width: 250px; height: auto; }
.login-title { font-size: 23px; font-weight: 700; margin: 0 0 8px; line-height: 1.35; letter-spacing: .5px; }
.login-sub { font-size: 13px; color: rgba(255, 255, 255, .62); margin: 0; letter-spacing: .4px; }
.login-feats { list-style: none; padding: 0; margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.login-feats li { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.login-feats li:first-child { border-top: none; }
.login-feats svg { color: var(--gold-500); flex: 0 0 auto; }

.login-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 44px;
  position: relative;
}
.login-card { width: 100%; max-width: 340px; }
.login-heading { font-size: 21px; font-weight: 700; margin: 0 0 22px; }
.login-form .form-label { font-size: 13px; color: var(--text-2); margin-bottom: 6px; transition: color .15s; }
/* 输入框聚焦时标签变金，与品牌色呼应 */
.login-form .field:has(input:focus) .form-label { color: var(--gold-600); }
.login-form .field-icon { position: relative; }
.login-form .field-icon > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-3);
  pointer-events: none; transition: color .15s;
}
.login-form .field-icon:focus-within > svg { color: var(--gold-600); }
.login-form .form-control { border-radius: var(--r); padding: 10px 12px 10px 36px; }
.login-form .form-control:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(28, 53, 86, .12); }
/* 密码可见切换 */
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--r-xs);
  color: var(--text-3); cursor: pointer;
}
.pw-toggle:hover { color: var(--text); background: var(--surface-3); }
.pw-toggle svg { width: 17px; height: 17px; }
.pw-toggle .ico-eye-off { display: none; }
.pw-toggle.showing .ico-eye { display: none; }
.pw-toggle.showing .ico-eye-off { display: block; }
.login-form .field-icon .form-control { padding-right: 38px; }
.login-btn {
  padding: 11px; border-radius: var(--r); font-weight: 600; margin-top: 6px;
  letter-spacing: 2px; transition: transform .12s, box-shadow .15s;
}
.login-btn:hover { box-shadow: 0 6px 18px rgba(28, 53, 86, .28); }
.login-btn:active { transform: translateY(1px); }
.login-foot { position: absolute; bottom: 16px; font-size: 12px; color: var(--text-3); margin: 0; }

@media (max-width: 767.98px) {
  .login-wrap { flex-direction: column; min-height: auto; }
  .login-aside { flex: none; padding: 30px 26px; }
  .aside-art { display: none; }
  .login-feats { display: none; }
  .login-main { padding: 30px 26px 52px; }
  .login-foot { position: static; margin-top: 20px; }
}

/* ===== 移动端自定义下拉候选 ===== */
.combo-wrapper { position: relative; display: block; }
.combo-dropdown-list {
  position: absolute;
  top: calc(100% + 3px);
  left: 0; right: 0;
  z-index: 2000;
  max-height: 264px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  margin: 0; padding: 4px;
  list-style: none;
  display: none;
}
.combo-dropdown-list.show { display: block; }
.combo-dropdown-list li {
  padding: 9px 11px;
  cursor: pointer;
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combo-dropdown-list li.active,
.combo-dropdown-list li:hover { background: var(--brand-100); color: var(--brand-600); }
.combo-dropdown-list .combo-empty { color: var(--text-3); cursor: default; padding: 12px; text-align: center; }
.combo-dropdown-list .combo-empty:hover { background: transparent; color: var(--text-3); }

/* ===== 右键行内菜单（桌面端）===== */
.context-menu {
  position: fixed;
  z-index: 3000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  min-width: 138px;
  padding: 5px;
  font-size: 13.5px;
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E");
}
/* 行标识：标明这条菜单对应哪一单，防止在多行数据中误操作 */
.context-menu-header {
  padding: 6px 12px 7px;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  cursor: default;
}
/* 标记项：文字固定，左侧勾选框表达当前状态（✓=已标记） */
.context-menu-item.has-flag { display: flex; align-items: center; gap: 9px; }
.context-menu-item .flag-state {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border: 1.6px solid var(--border-strong);
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  transition: .12s;
}
.context-menu-item.is-checked { background: var(--gold-100); }
.context-menu-item.is-checked .flag-state {
  background: var(--brand-600); border-color: var(--brand-600);
}
.context-menu-item.is-checked .flag-state::before {
  content: ""; width: 9px; height: 9px; background: #fff;
  -webkit-mask: var(--ico-check) center / contain no-repeat;
  mask: var(--ico-check) center / contain no-repeat;
}
.context-menu-item.is-checked.text-danger .flag-state { background: var(--danger); border-color: var(--danger); }
.context-menu ul { list-style: none; margin: 0; padding: 0; }
.context-menu-item { padding: 8px 12px; cursor: pointer; white-space: nowrap; color: var(--text); border-radius: var(--r-sm); }
.context-menu-item:hover { background: var(--surface-3); }
.context-menu-item.text-danger { color: var(--danger); }
.context-menu-item.text-danger:hover { background: var(--danger-bg); }
.context-menu-divider { height: 1px; margin: 4px 0; background: var(--border); }

/* ============================================================================
   响应式
   ============================================================================ */
@media (max-width: 991.98px) {
  .sidebar-toggle { display: inline-flex; }   /* 仅窄屏显示汉堡按钮 */
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    bottom: 0; left: 0;
    z-index: 1045;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.show {
    display: block;
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1040;
  }
  .content-inner { padding: 16px 14px 28px; }
}

@media (max-width: 767.98px) {
  .chart-grid { grid-template-columns: 1fr; }
  .chart-cell { height: 290px; }
  .page-title, .content-inner h4 { font-size: 18px; }
  .page-head { align-items: flex-start; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
  /* 手机端顶栏：隐藏副标题与账号标识，只留品牌与操作，防止撑出横向滚动 */
  .topbar { gap: 8px; padding: 0 12px; }
  .topbar-subtitle, .topbar-identity, .topbar-avatar { display: none; }
  .topbar-brand { font-size: 15px; letter-spacing: .8px; flex-shrink: 1; }
  .topbar-user { font-size: 12px; gap: 6px; }
  .topbar-user a, .topbar-user button.topbar-link { padding: 3px 8px; }
  /* 统计卡：两列排布，别一张卡占一整屏 */
  .stat-row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
  .stat-row .stat-value { font-size: 17px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi-card { padding: 13px 14px 13px 16px; }
  .kpi-value { font-size: 19px; }
  .kpi-icon { display: none; }
  /* 日期筛选：日期框并排占满，查询按钮独占一行，避免被挤成窄条 */
  .date-group { flex-wrap: wrap; width: 100%; gap: 6px; }
  .date-group label { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 4px; }
  .date-group input[type=date] { width: 100%; min-width: 0; }
  .date-group .btn { flex: 1 1 100%; }
  /* 筛选下拉/输入框过长时收缩，不撑破屏幕 */
  .col-auto { min-width: 0; max-width: 100%; }
  .col-auto .form-select, .col-auto .form-control { max-width: 100%; }
  /* 手机端可编辑下拉输入：放大字号，防止 iOS 聚焦缩放 */
  input.form-control[list], input.form-control.combo { font-size: 16px; }
}

/* 表格单元格不折行：桌面端同样生效，确保列宽不会被内容撑换行 */
.table-responsive > .table > :not(caption) > * > * { white-space: nowrap; }

/* 批量开单：手机端商品列至少 180px，避免输入框被压成一条 */
@media (max-width: 767.98px) {
  #saleItemsTable th:first-child,
  #saleItemsTable td:first-child,
  #purchaseItemsTable th:first-child,
  #purchaseItemsTable td:first-child { min-width: 180px; width: 55%; }
  #saleItemsTable td:first-child input,
  #purchaseItemsTable td:first-child input { min-width: 160px; width: 100%; }
}

/* ===== 数值排版：数值与单位稳定同一行 ===== */
.kpi-value, .stat-value { display: flex; align-items: baseline; flex-wrap: nowrap; }
.kpi-unit, .stat-unit { white-space: nowrap; }

/* 环形图图例：居中并与图保持统一间距（原来贴卡片左下角） */
#donutLegend { justify-content: center; padding-top: 12px !important; }

/* ===== 表格横向滚动提示 ===== */
/* 依旧需要横滑的表格（列数少或大屏）在右侧加渐隐 + 提示，避免用户以为数据只有这些 */
/* 提示由 app.js 插在 .table-responsive 之后（放在容器内会被一起横滚走） */
.table-hint {
  display: none;
  margin: -10px 0 14px;
  font-size: 11.5px; color: var(--text-3);
  text-align: right;
}
.table-hint.show { display: block; }

/* ===== 宽表格 → 卡片布局 ===== */
/* app.js 会为列数 ≥6 的表格外层加 .table-cards 并给每格补 data-label，
   在平板与手机宽度下把「一行」渲染成「一张卡」，避免十几列挤成一条缝。
   断点取 991.98（与侧栏抽屉一致）：平板横屏以下都不再依赖横向滚动。 */
@media (max-width: 991.98px) {
  .table-responsive.table-cards {
    border: none; box-shadow: none; background: transparent; overflow: visible;
  }
  /* 关键：把 table/tbody/tfoot 一并脱离表格布局，
     否则残留的 tfoot（如分析页「全部」合计行）会让表格宽度被算成半列 */
  .table-cards > .table { display: block; width: 100%; }
  .table-cards > .table > thead { display: none; }
  .table-cards > .table > :is(tbody, tfoot) { display: block; }
  .table-cards > .table > :is(tbody, tfoot) > tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    margin-bottom: 10px;
    padding: 4px 12px;
  }
  .table-cards > .table > :is(tbody, tfoot) > tr > td {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0 !important;
    border-bottom: 1px dashed var(--surface-3);
    white-space: normal;
    text-align: left !important;
    background-color: transparent !important;
    box-shadow: none !important;
    /* 长网址/单号这类无空格内容也要能折行，否则会把卡片撑出屏幕 */
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .table-cards > .table > :is(tbody, tfoot) > tr > td:last-child { border-bottom: none; }
  .table-cards > .table > :is(tbody, tfoot) > tr > td::before {
    content: attr(data-label);
    flex: 0 0 82px;
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.65;
  }
  .table-cards > .table > :is(tbody, tfoot) > tr > td:not([data-label])::before { content: none; }
  .table-cards > .table > :is(tbody, tfoot) > tr > td[colspan] { display: block; text-align: center !important; }
  .table-cards > .table > :is(tbody, tfoot) > tr > td[colspan]::before { content: none; }
  /* 首列作为卡片标题：加粗、去标签、与下方字段分隔 */
  .table-cards > .table > :is(tbody, tfoot) > tr > td:first-child {
    font-weight: 700;
    font-size: 14.5px;
    border-bottom-style: solid;
    padding-bottom: 8px !important;
  }
  .table-cards > .table > :is(tbody, tfoot) > tr > td:first-child::before { content: none; }
  /* 合计行（tfoot）用浅底区分 */
  .table-cards > .table > tfoot > tr { background: var(--surface-3); }
  /* 状态色在卡片模式下改为左侧色条，不再整行铺色 */
  .table-cards > .table > tbody > tr.sales-row-blacklist { border-left: 3px solid var(--danger-line); }
  .table-cards > .table > tbody > tr.sales-row-returned { border-left: 3px solid var(--info-line); }
  .table-cards > .table > tbody > tr.sales-row-refund { border-left: 3px solid var(--violet-line); }
  .table-cards > .table > tbody > tr.table-row-green { border-left: 3px solid var(--success-line); }
  .table-cards > .table > tbody > tr.table-row-orange { border-left: 3px solid var(--warning-line); }
  /* 销售单三个标记复选框已被 app.js 收进操作列的下拉，原空列不再显示 */
  .table-cards > .table > tbody > tr > td.flag-slot { display: none !important; }
  /* 操作列：图标按钮与「标记」下拉垂直居中，保持在同一行 */
  .table-cards > .table > tbody > tr > td:last-child { align-items: center; }
}

/* ===== 标记下拉（手机卡片模式：操作列里的「标记 ▾」）===== */
.flag-dd { position: relative; display: inline-flex; }
.flag-dd-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; font-size: 12.5px;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-xs);
  cursor: pointer; position: relative;
}
.flag-dd-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .15s;
}
.flag-dd.open .flag-dd-caret { transform: rotate(180deg); }
.flag-dd.open .flag-dd-btn { border-color: var(--brand-600); color: var(--brand-600); }
/* 有已标记项时按钮右上角亮一个小圆点 */
.flag-dd.has-flag .flag-dd-btn::after {
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-500); border: 1.5px solid var(--surface);
}
.flag-dd-menu {
  display: none;
  position: absolute; right: 0; bottom: calc(100% + 6px);
  min-width: 112px; padding: 4px; z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}
.flag-dd.open .flag-dd-menu { display: block; }
.flag-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--text);
  cursor: pointer; user-select: none; white-space: nowrap;
  border-radius: var(--r-xs);
}
.flag-chip:hover { background: var(--surface-3); }
.flag-chip input {
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--brand-600);
}
@media (pointer: coarse) {
  .flag-chip { padding: 10px 10px; }
  .flag-chip input { width: 20px; height: 20px; }
  /* 触屏下「标记」按钮与 40px 的行内图标按钮同高，操作行才齐整 */
  .flag-dd-btn { height: 40px; padding: 0 14px; font-size: 13.5px; }
}

/* ===== 批量开单/进货弹窗内的明细表：窄屏改「一条商品一张卡」 ===== */
/* 这两张表的行是 JS 动态生成的，没法用 data-label，故按列序写死标签。 */
@media (max-width: 991.98px) {
  #saleItemsTable, #purchaseItemsTable { display: block; }
  #saleItemsTable thead, #purchaseItemsTable thead { display: none; }
  #saleItemsTable tbody, #purchaseItemsTable tbody { display: block; }
  #saleItemsTable tbody tr, #purchaseItemsTable tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 6px 10px;
    margin-bottom: 8px;
    background: var(--surface);
  }
  #saleItemsTable tbody td, #purchaseItemsTable tbody td {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0 !important;
    border: none !important;
    background: transparent !important;
  }
  #saleItemsTable tbody td::before, #purchaseItemsTable tbody td::before {
    flex: 0 0 76px; font-size: 12.5px; color: var(--text-3);
  }
  /* 商品列占满整行且不加标签（它就是这张卡的标题） */
  #saleItemsTable tbody td:nth-child(1),
  #purchaseItemsTable tbody td:nth-child(1) { min-width: 0; width: auto; }
  #saleItemsTable tbody td:nth-child(1)::before,
  #purchaseItemsTable tbody td:nth-child(1)::before { content: none; }
  #saleItemsTable tbody td:nth-child(1) input,
  #purchaseItemsTable tbody td:nth-child(1) input { min-width: 0; width: 100%; }
  /* 其余列按表头顺序补标签 */
  #saleItemsTable tbody td:nth-child(2)::before { content: "当前库存"; }
  #saleItemsTable tbody td:nth-child(3)::before { content: "历史采购价"; }
  #saleItemsTable tbody td:nth-child(4)::before { content: "数量"; }
  #saleItemsTable tbody td:nth-child(5)::before { content: "本行备注"; }
  #purchaseItemsTable tbody td:nth-child(2)::before { content: "数量"; }
  #purchaseItemsTable tbody td:nth-child(3)::before { content: "进货单价"; }
  #purchaseItemsTable tbody td:nth-child(4)::before { content: "本行备注"; }
  /* 末列是删除按钮：右对齐、无标签 */
  #saleItemsTable tbody td:last-child,
  #purchaseItemsTable tbody td:last-child { justify-content: flex-end; padding-top: 6px !important; }
  #saleItemsTable tbody td:last-child::before,
  #purchaseItemsTable tbody td:last-child::before { content: none; }
}

/* ============================================================================
   触屏设备：放大点击目标
   ----------------------------------------------------------------------------
   放在文件最末尾，确保能覆盖前面所有同优先级的尺寸规则（尤其是表单段里的
   .table input[type=checkbox] { width:15px }）。
   ============================================================================ */
@media (pointer: coarse) {
  .btn-icon { width: 40px; height: 40px; margin: 0 2px; }
  .btn-icon::before { width: 18px; height: 18px; }
  .btn { --bs-btn-padding-y: .58rem; }
  .btn-sm { --bs-btn-padding-y: .58rem; --bs-btn-padding-x: .85rem; }
  .form-control { padding: .52rem .7rem; }
  .form-select { padding: .52rem .7rem; padding-right: 2.25rem; }
  .form-control-sm { padding: .5rem .65rem; font-size: 13.5px; }
  .form-select-sm { padding: .5rem .65rem; padding-right: 2rem; font-size: 13.5px; }
  .pagination .page-link { padding: .55rem .7rem; min-width: 38px; }
  .topbar-user a, .topbar-user button.topbar-link { padding: 8px 12px; }
  .quick-btn { padding: 9px 15px; font-size: 13.5px; }
  .view-tab { padding: 9px 18px; }
  input[type=checkbox], input[type=radio],
  .table input[type=checkbox] { width: 22px; height: 22px; }
  .cb-hit { width: 44px; height: 44px; margin: -10px 0; }
  /* 覆盖模板里为紧凑加的 py-0 / p-0（触屏上需要更大的可点区域） */
  .btn.py-0, .btn.p-0 { padding: .58rem .85rem !important; }
}