/* =====================================================================
 * 瑞礼ERP · 全局润色层（polish.css）  —— 安全、非侵入
 * 设计原则：
 *   1) 表格斑马纹 / 主题开关 / 品牌栏 走「命名类 + 作用域」，不与旧页冲突；
 *   2) 其余全局规则一律用 :where()（特异性 0），只填补旧页未定义的空白，
 *      绝不覆盖旧页已写好的 .btn / .modal / .toast / .table 等同名样式。
 *   3) 本文件全局加载（56 个视图页），base.css 仅保留在 3 个标杆页。
 * ===================================================================== */

/* ---------- 1) 数据表斑马纹（仅作用于显式 .grid 的数据表） ---------- */
:where(table.grid) {
  width: 100%; border-collapse: collapse; font-size: var(--fs-base);
  background: var(--c-bg-card);
}
:where(table.grid th) {
  background: var(--c-bg-subtle); color: var(--c-text-secondary);
  font-weight: var(--fw-medium); text-align: left; white-space: nowrap;
  padding: 0 var(--sp-4); height: 42px;
  border-bottom: 1px solid var(--c-border);
}
:where(table.grid td) {
  padding: 0 var(--sp-4); height: var(--table-row-h);
  border-bottom: 1px solid var(--c-border); color: var(--c-text);
  vertical-align: middle;
}
/* 奇偶行交替（旧页未定义 bg 时生效） */
:where(table.grid tbody tr:nth-child(odd) td)  { background: var(--table-zebra-odd); }
:where(table.grid tbody tr:nth-child(even) td) { background: var(--table-zebra-even); }
/* hover 高亮（覆盖斑马，保证可读性） */
:where(table.grid tbody tr:hover td) { background: var(--c-bg-hover); }

/* ---------- 2) 主题开关（自包含，无需内层标签） ---------- */
.theme-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: var(--fs-sm); user-select: none; color: inherit;
}
.theme-toggle::before {
  content: ""; width: 42px; height: 22px; border-radius: 11px; flex: none;
  background: var(--c-border-strong); position: relative; transition: var(--transition);
}
.theme-toggle::after {
  content: ""; position: absolute; top: 50%; left: 3px; width: 18px; height: 18px;
  margin-top: -9px; border-radius: 50%; background: #fff; transition: var(--transition);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
[data-theme="dark"] .theme-toggle::before { background: var(--c-primary); }
[data-theme="dark"] .theme-toggle::after  { left: 23px; }

/* ---------- 3) 悬浮主题切换按钮（由 erp-ui.js 注入到所有子页） ---------- */
.erp-fab-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--c-primary); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; box-shadow: var(--shadow-pop);
  transition: var(--transition);
}
.erp-fab-toggle:hover { background: var(--c-primary-hover); transform: translateY(-2px); }
.erp-fab-toggle:focus-visible { outline: 2px solid var(--c-primary-hover); outline-offset: 2px; }

/* ---------- 4) 品牌标题栏（标杆页使用，全站可复用） ---------- */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); padding: 0 var(--sp-5);
  background: var(--c-bg-header); color: var(--c-text-on-dark);
}
.page-header .ph-title { font-size: var(--fs-lg); font-weight: var(--fw-medium); letter-spacing: .5px; }
.page-header .ph-actions { display: flex; align-items: center; gap: var(--sp-4); }
.page-header .ph-brand {
  font-size: var(--fs-sm); color: var(--c-text-on-dark-muted);
  border: 1px solid var(--c-border-header); padding: 2px 10px; border-radius: 999px;
}

/* ---------- 5) 无障碍：统一键盘聚焦指示 ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 4px;
}

/* =====================================================================
 * 2026-08-13 后台视觉统一层
 * 覆盖旧页面零散的内联样式，同时保持业务 DOM 与脚本不变。
 * ===================================================================== */
body.erp-skin {
  min-width: 0;
  padding: 18px;
  overflow-x: hidden;
  background: #f4f6f9;
  color: var(--c-text);
  line-height: 1.5;
}
body.erp-skin *,
body.erp-skin *::before,
body.erp-skin *::after { box-sizing: border-box; }

body.erp-skin > .page-header,
body.erp-skin > .page-card,
body.erp-skin > .card,
body.erp-skin > .panel,
body.erp-skin > .toolbar,
body.erp-skin > .filter-bar {
  width: 100%;
  min-width: 0;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
}

body.erp-skin .page-header {
  position: relative;
  top: auto;
  z-index: 20;
  min-height: 52px;
  height: auto;
  margin-bottom: 12px;
  padding: 12px 18px;
  color: var(--c-text);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-primary);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
body.erp-skin .page-header .ph-title,
body.erp-skin .page-header h2 {
  color: var(--c-text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
}
body.erp-skin .page-header h2::before { display: none; }
body.erp-skin .page-header .ph-brand {
  color: var(--c-text-secondary);
  border-color: var(--c-border);
  background: var(--c-bg-subtle);
}
body.erp-skin .page-header .page-tip { color: var(--c-text-muted); }

body.erp-skin .page-card,
body.erp-skin .card,
body.erp-skin .panel,
body.erp-skin .panel-card,
body.erp-skin .table-card {
  min-width: 0;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .04);
}
body.erp-skin .page-card,
body.erp-skin .card,
body.erp-skin .panel { border-top: 1px solid var(--c-border); }

body.erp-skin .search-bar,
body.erp-skin .filter-bar,
body.erp-skin .toolbar,
body.erp-skin .erp-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  min-width: 0;
  padding: 14px 18px;
  margin: 0;
  background: var(--c-bg-card);
  border: 0;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  box-shadow: none;
}
body.erp-skin .search-bar .form-item,
body.erp-skin .filter-bar .form-item,
body.erp-skin .toolbar .fitem,
body.erp-skin .erp-filter .f-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
body.erp-skin .search-bar label,
body.erp-skin .filter-bar label,
body.erp-skin .toolbar label {
  color: var(--c-text-secondary);
  font-size: 13px;
}
body.erp-skin .search-bar input,
body.erp-skin .search-bar select,
body.erp-skin .filter-bar input,
body.erp-skin .filter-bar select,
body.erp-skin .toolbar input,
body.erp-skin .toolbar select {
  min-width: 0;
  height: 34px;
  border-color: var(--c-border-strong);
  background: var(--c-bg-card);
}
body.erp-skin input[type="checkbox"],
body.erp-skin input[type="radio"] {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  box-shadow: none !important;
  accent-color: var(--c-primary);
}
body.erp-skin .form-item label:has(input[type="checkbox"]),
body.erp-skin .form-item label:has(input[type="radio"]) {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

body.erp-skin .action-bar,
body.erp-skin .erp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 18px;
  background: var(--c-bg-card);
  border: 0;
  border-bottom: 1px solid var(--c-border);
  box-shadow: none;
}
body.erp-skin .action-bar .batch-group { display: inline-flex; flex-wrap: wrap; gap: 8px; }
body.erp-skin .btn {
  min-width: 0;
  height: 34px;
  padding: 0 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  white-space: nowrap;
}
body.erp-skin .btn-primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: 0 1px 2px rgba(37, 99, 235, .18);
}
body.erp-skin .btn-default { background: var(--c-bg-card); border: 1px solid var(--c-border-strong); color: var(--c-text-secondary); }
body.erp-skin .btn-default:hover { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary); }
body.erp-skin .btn-link { height: auto; padding: 3px 5px; box-shadow: none; }

body.erp-skin .summary-bar,
body.erp-skin .summary,
body.erp-skin .erp-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  min-width: 0;
  padding: 11px 18px;
  margin: 0;
  background: #f8fafc;
  border: 0;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
}
body.erp-skin .summary-bar > span,
body.erp-skin .summary > span,
body.erp-skin .erp-summary .s-item {
  color: var(--c-text-secondary);
  font-size: 13px;
  white-space: nowrap;
}
body.erp-skin .summary-bar b,
body.erp-skin .summary b { color: var(--c-text); font-variant-numeric: tabular-nums; }

body.erp-skin .table-wrap,
body.erp-skin .erp-table-wrap,
body.erp-skin .table-scroll,
body.erp-skin .panel-card > [style*="overflow-x"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
body.erp-skin .panel:has(> table),
body.erp-skin .panel:has(> .table-wrap) {
  max-width: 100%;
  overflow-x: auto;
}
body.erp-skin .table-wrap { padding: 0 18px 12px; }
body.erp-skin table.grid {
  width: 100%;
  min-width: 860px;
  max-width: none;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--c-bg-card);
}
body.erp-skin table.grid thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 40px;
  padding: 0 11px;
  color: #475467;
  background: #f1f4f8;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border-strong);
  font-size: 12px;
  font-weight: 600;
}
body.erp-skin table.grid tbody td {
  height: 42px;
  padding: 7px 11px;
  font-size: 13px;
  line-height: 1.45;
}
body.erp-skin table.grid tbody tr:nth-child(odd) td { background: var(--c-bg-card); }
body.erp-skin table.grid tbody tr:nth-child(even) td { background: #f8fafc; }
body.erp-skin table.grid tbody tr:hover td { background: #eef4ff !important; }
body.erp-skin table.grid .col-action,
body.erp-skin table.grid .col-check { background: inherit; }

body.erp-skin .pagination,
body.erp-skin .pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  padding: 11px 18px;
  border-top: 1px solid var(--c-border);
}
body.erp-skin .pagination .page-info,
body.erp-skin .pager .page-info { margin: 0 6px 0 0; white-space: nowrap; }
body.erp-skin .pagination .page-btn,
body.erp-skin .pager .page-btn { min-width: 30px; height: 30px; border-radius: 5px; }

body.erp-skin .modal-box,
body.erp-skin .modal-overlay .modal-box {
  width: min(560px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: 0 20px 48px rgba(16, 24, 40, .2);
}

[data-theme="dark"] body.erp-skin { background: var(--c-bg-page); }
[data-theme="dark"] body.erp-skin .summary-bar,
[data-theme="dark"] body.erp-skin .summary,
[data-theme="dark"] body.erp-skin .erp-summary,
[data-theme="dark"] body.erp-skin table.grid thead th { background: var(--c-bg-subtle); color: var(--c-text-secondary); }
[data-theme="dark"] body.erp-skin table.grid tbody tr:nth-child(even) td { background: var(--c-bg-subtle); }

@media (max-width: 760px) {
  body.erp-skin { padding: 10px; }
  body.erp-skin > .page-header,
  body.erp-skin > .page-card,
  body.erp-skin > .card,
  body.erp-skin > .panel { max-width: 100%; }
  body.erp-skin .page-header { min-height: 46px; padding: 9px 12px; margin-bottom: 8px; }
  body.erp-skin .page-header .ph-title,
  body.erp-skin .page-header h2 { font-size: 16px; }
  body.erp-skin .page-header .ph-brand,
  body.erp-skin .page-header .page-tip { display: none; }

  body.erp-skin .search-bar,
  body.erp-skin .filter-bar,
  body.erp-skin .toolbar,
  body.erp-skin .erp-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
    align-items: end;
    padding: 12px;
  }
  body.erp-skin .search-bar .form-item,
  body.erp-skin .filter-bar .form-item,
  body.erp-skin .toolbar .fitem,
  body.erp-skin .erp-filter .f-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }
  body.erp-skin .search-bar .form-item:has(input[type="checkbox"]),
  body.erp-skin .filter-bar .form-item:has(input[type="checkbox"]) {
    flex-direction: row;
    align-items: center;
    align-self: end;
    min-height: 34px;
  }
  body.erp-skin .search-bar .form-item label,
  body.erp-skin .filter-bar .form-item label,
  body.erp-skin .toolbar .fitem label,
  body.erp-skin .erp-filter .f-item label { white-space: normal; }
  body.erp-skin .search-bar input,
  body.erp-skin .search-bar select,
  body.erp-skin .filter-bar input,
  body.erp-skin .filter-bar select,
  body.erp-skin .toolbar input,
  body.erp-skin .toolbar select,
  body.erp-skin .erp-filter input,
  body.erp-skin .erp-filter select { width: 100% !important; min-width: 0 !important; }
  body.erp-skin .search-bar > .btn,
  body.erp-skin .filter-bar > .btn,
  body.erp-skin .toolbar > .btn { width: 100%; justify-content: center; }

  body.erp-skin .action-bar,
  body.erp-skin .erp-toolbar { padding: 10px 12px; gap: 7px; overflow: visible; }
  body.erp-skin .action-bar .btn { flex: 0 0 auto; }
  body.erp-skin .action-bar .batch-group { width: 100%; }
  body.erp-skin .summary-bar,
  body.erp-skin .summary,
  body.erp-skin .erp-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 10px 12px;
  }
  body.erp-skin .summary-bar > span,
  body.erp-skin .summary > span,
  body.erp-skin .erp-summary .s-item { white-space: normal; }
  body.erp-skin .table-wrap { padding: 0 12px 10px; }
  body.erp-skin table.grid { min-width: 820px; }
  body.erp-skin .pagination,
  body.erp-skin .pager { justify-content: flex-start; padding: 10px 12px; }
  body.erp-skin .pagination .page-info,
  body.erp-skin .pager .page-info { width: 100%; }

  body.erp-skin .form-wrap { padding: 14px !important; }
  body.erp-skin .config-grid,
  body.erp-skin .erp-form-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  body.erp-skin .config-item,
  body.erp-skin .erp-field { min-width: 0; }
  body.erp-skin .config-item {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }
  body.erp-skin .config-item label {
    width: auto !important;
    max-width: 100%;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere;
  }
  body.erp-skin .config-item .form-control { width: 100%; min-width: 0; }
  body.erp-skin .config-item input,
  body.erp-skin .config-item textarea { width: 100%; min-width: 0; }
  body.erp-skin .config-key,
  body.erp-skin .config-remark,
  body.erp-skin .key-tag { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
  body.erp-skin .form-footer { flex-wrap: wrap; padding: 12px 14px !important; }
}

@media (max-width: 460px) {
  body.erp-skin .search-bar,
  body.erp-skin .filter-bar,
  body.erp-skin .toolbar,
  body.erp-skin .erp-filter { grid-template-columns: minmax(0, 1fr); }
  body.erp-skin .summary-bar,
  body.erp-skin .summary,
  body.erp-skin .erp-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 6) 滚动条润色（WebKit / 现代 Firefox）—— 现代细条风格 ----------
 * 范围扩展到 *：覆盖 .layout-sidebar / .layout-main / modal-body 等所有可滚动容器。
 * 原 :where(body) 太窄，侧边栏滚动条不受影响，仍是浏览器默认灰条（深色背景上很丑）。
 * 中性灰半透明 + pill 形，深浅背景自适应；hover 加深到 0.7。
 * :where() 零特异性，零全局冲突。
 */
:where(html) { scrollbar-color: rgba(125,125,125,0.4) transparent; scrollbar-width: thin; }
:where(*)::-webkit-scrollbar { width: 8px; height: 8px; }
:where(*)::-webkit-scrollbar-track { background: transparent; }
:where(*)::-webkit-scrollbar-thumb {
  background: rgba(125,125,125,0.35); border-radius: 999px;
  border: none; transition: background 0.15s;
}
:where(*)::-webkit-scrollbar-thumb:hover { background: rgba(125,125,125,0.7); }
:where(*)::-webkit-scrollbar-corner { background: transparent; }

/* ---------- 7) 标签 / 状态徽标禁止内部换行兜底 ----------
 * 旧页（如 goods/index.html）内嵌 <style> 重写了 .tag 但未带 white-space:nowrap，
 * 当 <td> 列宽被「列显示」拖窄时，"在仓商品/外部货源/上架/下架" 等会按字竖排。
 * .sm-tag / .gt-tag 为表单内跟随 radio 的小徽标（在仓管理/代发调拨/配方组装），窄屏同样会竖排。
 * base.css 已有同规则但仅加载在 3 个标杆页；此处用 :where() 零特异性全局兜底 56 页，
 * 不覆盖旧页任何已写好的颜色/字号样式，仅补 nowrap 行为。
 * （注：.status-badge 在 detail 页内嵌 style 已自带 nowrap，无需重复。）
 */
:where(.tag, .sm-tag, .gt-tag) { white-space: nowrap; }

/* =====================================================================
 * 8) 浅色商务视觉层（2026-08-10 全站统一）
 * 目标：页面不再"纯黑/平涂"，浅色为浅灰蓝渐变 + 蓝光晕，暗色为深蓝渐变；
 *       按钮统一 3D 立体按压手感；卡片/表头统一圆角与商务投影。
 * 说明：使用 html body 前缀提升特异性，覆盖各页内联 .btn/.card 的扁平样式；
 *       .btn-link（文字按钮）保持无阴影，避免误伤。
 * ===================================================================== */

/* ---------- 页面背景：浅灰蓝渐变 + 顶部光晕（暗色为深蓝渐变） ---------- */
html body {
  background:
    radial-gradient(1100px 420px at 82% -8%, rgba(37, 99, 235, .08), transparent 60%),
    linear-gradient(180deg, #F5F8FD 0%, #EFF4FB 100%);
  background-attachment: fixed;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(1100px 460px at 82% -8%, rgba(64, 150, 255, .10), transparent 60%),
    linear-gradient(180deg, #131F36 0%, #0E1728 100%);
  background-attachment: fixed;
}

/* ---------- 3D 按钮：底部厚阴影凸起 + hover 上浮 + active 下压 ---------- */
html body .btn:not(.btn-link) {
  border-radius: 8px;
  box-shadow: 0 3px 0 rgba(15, 23, 42, .18), 0 5px 12px rgba(15, 23, 42, .08);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .70) 0%, rgba(255, 255, 255, .08) 45%, rgba(15, 23, 42, .06) 100%);
  background-blend-mode: overlay;
  transition:
    transform .12s ease, box-shadow .12s ease, filter .12s ease,
    background .2s ease, border-color .2s ease, color .2s ease;
}
html body .btn:not(.btn-link):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(15, 23, 42, .20), 0 8px 16px rgba(15, 23, 42, .11);
}
html body .btn:not(.btn-link):active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .20), 0 2px 6px rgba(15, 23, 42, .09);
}
html body .btn:not(.btn-link):disabled,
html body .btn:not(.btn-link).is-disabled {
  transform: none;
  box-shadow: none;
}

/* 主按钮 / 成功 / 危险：同色系厚阴影，立体感更强 */
html body .btn-primary:not(.btn-link),
html body .btn-success:not(.btn-link),
html body .btn-danger:not(.btn-link) {
  box-shadow: 0 4px 0 rgba(9, 30, 66, .34), 0 7px 16px rgba(16, 24, 40, .16);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, .10) 100%);
  background-blend-mode: overlay;
}
html body .btn-primary:not(.btn-link):hover,
html body .btn-success:not(.btn-link):hover,
html body .btn-danger:not(.btn-link):hover {
  box-shadow: 0 5px 0 rgba(9, 30, 66, .36), 0 10px 20px rgba(16, 24, 40, .20);
}
html body .btn-primary:not(.btn-link):active,
html body .btn-success:not(.btn-link):active,
html body .btn-danger:not(.btn-link):active {
  box-shadow: 0 1px 0 rgba(9, 30, 66, .34), 0 2px 6px rgba(16, 24, 40, .10);
}

/* ---------- 卡片 / 面板：统一圆角与商务投影 ---------- */
html body .card,
html body .panel,
html body .page-card,
html body .page-card-wrap {
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}

/* ---------- 表头：浅蓝渐变（暗色为蓝调微光） ---------- */
html body table.grid thead th,
html body table thead th {
  background: var(--tbl-head);
  font-weight: 600;
}