/* ============================================================
   JXC 进销存 · 黑金商务风设计系统 v2
   墨黑画布 + 金色强调 + 发丝边框
   ============================================================ */

:root {
  /* ---- 品牌色 ---- */
  --jx-gold: #C49A4A;
  --jx-gold-bright: #D9B36A;
  --jx-gold-dark: #8B6B2F;
  --jx-gold-tint: rgba(196, 154, 74, 0.15);
  --jx-gold-border: rgba(196, 154, 74, 0.4);

  /* ---- 表面层级 ---- */
  --jx-bg-canvas: #0A0A0A;
  --jx-bg-panel: #121212;
  --jx-bg-card: #171717;
  --jx-bg-hover: #1E1E1E;
  --jx-bg-sunken: #0F0F0F;

  /* ---- 文字 ---- */
  --jx-text-primary: #FAFAFA;
  --jx-text-secondary: rgba(250, 250, 250, 0.66);
  --jx-text-muted: rgba(250, 250, 250, 0.4);

  /* ---- 边框 ---- */
  --jx-border-subtle: #262626;
  --jx-border-strong: #2F2F2F;

  /* ---- 语义色(深色背景适配) ---- */
  --jx-success: #2E8B57;
  --jx-success-text: #4CAF80;
  --jx-success-tint: rgba(46, 139, 87, 0.18);
  --jx-warning: #D4A017;
  --jx-warning-text: var(--jx-gold-bright);
  --jx-warning-tint: rgba(212, 160, 23, 0.16);
  --jx-danger: #C0392B;
  --jx-danger-text: #E87461;
  --jx-danger-tint: rgba(192, 57, 43, 0.18);
  --jx-info: #5B78A0;
  --jx-info-text: #8FA8C8;
  --jx-info-tint: rgba(91, 120, 160, 0.18);

  /* ---- 圆角 ---- */
  --jx-radius-sm: 8px;
  --jx-radius-md: 12px;
  --jx-radius-lg: 16px;
  --jx-radius-pill: 999px;

  /* ---- 间距 ---- */
  --jx-space-xs: 4px;
  --jx-space-sm: 8px;
  --jx-space-md: 12px;
  --jx-space-lg: 16px;
  --jx-space-xl: 24px;
  --jx-space-2xl: 32px;

  /* ---- 字体 ---- */
  --jx-font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
  --jx-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* ---- 阴影 ---- */
  --jx-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --jx-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.4);
  --jx-glow-gold: 0 0 24px rgba(196, 154, 74, 0.15);
}

/* ============ 基础 ============ */
body {
  background-color: var(--jx-bg-canvas);
  color: var(--jx-text-primary);
  font-family: var(--jx-font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--jx-gold-bright);
}
a:hover {
  color: var(--jx-gold);
}

.text-muted { color: var(--jx-text-muted) !important; }
.text-secondary { color: var(--jx-text-secondary) !important; }
.text-success { color: var(--jx-success-text) !important; }
.text-warning { color: var(--jx-warning-text) !important; }
.text-danger { color: var(--jx-danger-text) !important; }
.text-primary { color: var(--jx-gold-bright) !important; }
.text-info { color: var(--jx-info-text) !important; }

/* ============ 卡片 ============ */
.card, .data-card {
  background: var(--jx-bg-card);
  border: 1px solid var(--jx-border-subtle);
  border-radius: var(--jx-radius-lg);
  box-shadow: var(--jx-shadow-card);
}

.card-body, .data-card-body { color: var(--jx-text-primary); }

.card-header, .data-card-header {
  background: transparent;
  border-bottom: 1px solid var(--jx-border-subtle);
  color: var(--jx-text-primary);
}

.data-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--jx-text-primary);
}

/* ============ 表格 ============ */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--jx-text-primary);
  --bs-table-border-color: var(--jx-border-subtle);
  --bs-table-hover-bg: var(--jx-bg-hover);
  --bs-table-hover-color: var(--jx-text-primary);
  color: var(--jx-text-primary);
}

.table thead th {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--jx-text-secondary);
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--jx-border-strong) !important;
  white-space: nowrap;
}

.table tbody td {
  color: var(--jx-text-primary);
  border-bottom: 1px solid var(--jx-border-subtle);
  vertical-align: middle;
}

.table tbody tr:hover td {
  background: var(--jx-bg-hover);
}

/* ============ 按钮 ============ */
.btn {
  border-radius: 10px;
  font-weight: 500;
}

.btn-primary {
  --bs-btn-bg: var(--jx-gold);
  --bs-btn-border-color: var(--jx-gold);
  --bs-btn-hover-bg: var(--jx-gold-bright);
  --bs-btn-hover-border-color: var(--jx-gold-bright);
  --bs-btn-active-bg: var(--jx-gold-dark);
  --bs-btn-active-border-color: var(--jx-gold-dark);
  --bs-btn-color: var(--jx-bg-canvas);
  --bs-btn-hover-color: var(--jx-bg-canvas);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: rgba(196, 154, 74, 0.4);
  --bs-btn-disabled-border-color: rgba(196, 154, 74, 0.4);
  --bs-btn-disabled-color: rgba(10, 10, 10, 0.5);
  font-weight: 600;
}

.btn-outline-primary {
  --bs-btn-color: var(--jx-gold-bright);
  --bs-btn-border-color: var(--jx-gold-border);
  --bs-btn-hover-bg: var(--jx-gold-tint);
  --bs-btn-hover-border-color: var(--jx-gold);
  --bs-btn-hover-color: var(--jx-gold-bright);
  --bs-btn-active-bg: var(--jx-gold);
  --bs-btn-active-border-color: var(--jx-gold);
  --bs-btn-active-color: var(--jx-bg-canvas);
  --bs-btn-disabled-color: rgba(217, 179, 106, 0.4);
  --bs-btn-disabled-border-color: rgba(196, 154, 74, 0.3);
}

.btn-outline-secondary {
  --bs-btn-color: var(--jx-text-secondary);
  --bs-btn-border-color: var(--jx-border-strong);
  --bs-btn-hover-bg: var(--jx-bg-hover);
  --bs-btn-hover-border-color: var(--jx-border-strong);
  --bs-btn-hover-color: var(--jx-text-primary);
  --bs-btn-active-bg: var(--jx-bg-hover);
  --bs-btn-active-color: var(--jx-text-primary);
}

.btn-outline-success {
  --bs-btn-color: var(--jx-success-text);
  --bs-btn-border-color: rgba(76, 175, 128, 0.4);
  --bs-btn-hover-bg: var(--jx-success-tint);
  --bs-btn-hover-border-color: var(--jx-success-text);
  --bs-btn-hover-color: var(--jx-success-text);
}

.btn-outline-danger {
  --bs-btn-color: var(--jx-danger-text);
  --bs-btn-border-color: rgba(232, 116, 97, 0.4);
  --bs-btn-hover-bg: var(--jx-danger-tint);
  --bs-btn-hover-border-color: var(--jx-danger-text);
  --bs-btn-hover-color: var(--jx-danger-text);
}

.btn-outline-info {
  --bs-btn-color: var(--jx-info-text);
  --bs-btn-border-color: rgba(143, 168, 200, 0.4);
  --bs-btn-hover-bg: var(--jx-info-tint);
  --bs-btn-hover-border-color: var(--jx-info-text);
  --bs-btn-hover-color: var(--jx-info-text);
}

.btn-outline-warning {
  --bs-btn-color: var(--jx-warning-text);
  --bs-btn-border-color: rgba(217, 179, 106, 0.4);
  --bs-btn-hover-bg: var(--jx-warning-tint);
  --bs-btn-hover-border-color: var(--jx-warning-text);
  --bs-btn-hover-color: var(--jx-warning-text);
}

.btn-secondary {
  --bs-btn-bg: rgba(255, 255, 255, 0.06);
  --bs-btn-border-color: var(--jx-border-strong);
  --bs-btn-color: var(--jx-text-primary);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
  --bs-btn-hover-border-color: var(--jx-border-strong);
  --bs-btn-hover-color: #fff;
}

.btn-danger {
  --bs-btn-bg: var(--jx-danger);
  --bs-btn-border-color: var(--jx-danger);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #D04A3C;
  --bs-btn-hover-border-color: #D04A3C;
}

.btn-success {
  --bs-btn-bg: var(--jx-success);
  --bs-btn-border-color: var(--jx-success);
  --bs-btn-color: #fff;
}

.btn-info {
  --bs-btn-bg: var(--jx-info);
  --bs-btn-border-color: var(--jx-info);
  --bs-btn-color: #fff;
}

/* ============ 表单 ============ */
.form-control, .form-select {
  background-color: var(--jx-bg-sunken);
  border: 1px solid var(--jx-border-strong);
  border-radius: 10px;
  color: var(--jx-text-primary);
  padding: 9px 14px;
}

.form-control:focus, .form-select:focus {
  background-color: var(--jx-bg-sunken);
  border-color: var(--jx-gold);
  box-shadow: 0 0 0 4px rgba(196, 154, 74, 0.12);
  color: var(--jx-text-primary);
}

.form-control::placeholder {
  color: var(--jx-text-muted);
}

.form-control:disabled, .form-select:disabled {
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--jx-text-muted);
}

.form-control[readonly] {
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--jx-text-secondary);
}

.form-label {
  color: var(--jx-text-secondary);
  font-weight: 500;
  margin-bottom: 6px;
}

.form-select option {
  background-color: var(--jx-bg-panel);
  color: var(--jx-text-primary);
}

.input-group-text {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--jx-border-strong);
  color: var(--jx-text-secondary);
}

.form-check-input {
  background-color: var(--jx-bg-sunken);
  border-color: var(--jx-border-strong);
}
.form-check-input:checked {
  background-color: var(--jx-gold);
  border-color: var(--jx-gold);
}

/* ============ 状态徽章(圆角胶囊) ============ */
.badge, .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--jx-radius-pill);
  font-weight: 500;
  font-size: 0.8rem;
}

.status-badge { color: var(--jx-text-primary) !important; }

.status-badge.success, .badge.bg-success {
  background: var(--jx-success-tint) !important;
  color: var(--jx-success-text) !important;
}
.status-badge.warning, .badge.bg-warning {
  background: var(--jx-warning-tint) !important;
  color: var(--jx-warning-text) !important;
}
.status-badge.danger, .badge.bg-danger {
  background: var(--jx-danger-tint) !important;
  color: var(--jx-danger-text) !important;
}
.status-badge.info, .badge.bg-info {
  background: var(--jx-info-tint) !important;
  color: var(--jx-info-text) !important;
}
.status-badge.primary, .badge.bg-primary {
  background: var(--jx-gold-tint) !important;
  color: var(--jx-gold-bright) !important;
}
.badge.bg-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--jx-text-secondary) !important;
}
.badge.bg-dark { background: var(--jx-bg-hover) !important; color: var(--jx-text-primary) !important; }

/* ============ 分页 ============ */
.pagination .page-link {
  background: transparent;
  border: none;
  color: var(--jx-text-secondary);
  border-radius: 8px;
  margin: 0 3px;
  padding: 8px 14px;
}
.pagination .page-link:hover {
  background: var(--jx-bg-hover);
  color: var(--jx-text-primary);
}
.pagination .page-item.active .page-link {
  background: var(--jx-gold-tint);
  border: 1px solid var(--jx-gold-border);
  color: var(--jx-gold-bright);
  font-weight: 600;
}
.pagination .page-item.disabled .page-link {
  color: var(--jx-text-muted);
}

/* ============ 导航 Tab ============ */
.nav-tabs {
  border-bottom: 1px solid var(--jx-border-subtle);
}
.nav-tabs .nav-link {
  color: var(--jx-text-secondary);
  border: none;
  padding: 12px 20px;
  font-weight: 500;
}
.nav-tabs .nav-link:hover {
  color: var(--jx-gold-bright);
}
.nav-tabs .nav-link.active {
  color: var(--jx-gold-bright);
  border-bottom: 3px solid var(--jx-gold);
  background: transparent;
}

.nav-pills .nav-link {
  color: var(--jx-text-secondary);
  border-radius: var(--jx-radius-pill);
}
.nav-pills .nav-link.active {
  background: var(--jx-gold-tint);
  color: var(--jx-gold-bright);
}

/* ============ 弹窗 Modal ============ */
.modal-content {
  background-color: var(--jx-bg-panel);
  border: 1px solid var(--jx-border-strong);
  border-radius: var(--jx-radius-lg);
  color: var(--jx-text-primary);
}
.modal-header {
  border-bottom: 1px solid var(--jx-border-subtle);
}
.modal-footer {
  border-top: 1px solid var(--jx-border-subtle);
}
.modal-backdrop.show {
  opacity: 0.7;
}

/* ============ 下拉菜单 ============ */
.dropdown-menu {
  background-color: var(--jx-bg-panel);
  border: 1px solid var(--jx-border-strong);
  border-radius: var(--jx-radius-md);
  box-shadow: var(--jx-shadow-hover);
}
.dropdown-item {
  color: var(--jx-text-primary);
  border-radius: 8px;
  margin: 2px 6px;
  padding: 8px 12px;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--jx-bg-hover);
  color: var(--jx-text-primary);
}
.dropdown-item.text-danger { color: var(--jx-danger-text) !important; }
.dropdown-divider {
  border-color: var(--jx-border-subtle);
}

/* ============ 列表组 ============ */
.list-group-item {
  background: transparent;
  border-color: var(--jx-border-subtle);
  color: var(--jx-text-primary);
}
.list-group-item:hover {
  background: var(--jx-bg-hover);
}
.list-group-item-action {
  color: var(--jx-text-primary);
}

/* ============ 告警 ============ */
.alert {
  border-radius: var(--jx-radius-md);
  border: 1px solid;
}
.alert-danger {
  background: var(--jx-danger-tint);
  border-color: rgba(232, 116, 97, 0.3);
  color: var(--jx-danger-text);
}
.alert-success {
  background: var(--jx-success-tint);
  border-color: rgba(76, 175, 128, 0.3);
  color: var(--jx-success-text);
}
.alert-warning {
  background: var(--jx-warning-tint);
  border-color: rgba(217, 179, 106, 0.3);
  color: var(--jx-warning-text);
}
.alert-info {
  background: var(--jx-info-tint);
  border-color: rgba(143, 168, 200, 0.3);
  color: var(--jx-info-text);
}

/* ============ 日期/搜索输入 ============ */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

/* ============ 滚动条 ============ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--jx-border-strong);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--jx-gold-dark);
}

/* ============ 页面标题 ============ */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.page-head h1, .page-head h4, .page-head h5 {
  margin: 0;
  font-weight: 700;
  color: var(--jx-text-primary);
}
.page-head .page-head-sub {
  color: var(--jx-text-secondary);
  font-size: 0.85rem;
  margin-top: 2px;
}

/* ============ 筛选卡片 ============ */
.filter-card {
  background: var(--jx-bg-card);
  border: 1px solid var(--jx-border-subtle);
  border-radius: var(--jx-radius-lg);
  padding: 16px 20px;
  margin-bottom: 16px;
}

/* ============ 统计卡 ============ */
.stat-card {
  background: var(--jx-bg-card);
  border: 1px solid var(--jx-border-subtle);
  border-radius: var(--jx-radius-lg);
  padding: 22px;
  transition: all 0.25s ease;
}
.stat-card:hover {
  border-color: var(--jx-gold-border);
  box-shadow: var(--jx-glow-gold);
  transform: translateY(-2px);
}
.stat-card .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 12px;
}
.stat-card .stat-icon.primary { background: var(--jx-gold-tint); color: var(--jx-gold-bright); }
.stat-card .stat-icon.success { background: var(--jx-success-tint); color: var(--jx-success-text); }
.stat-card .stat-icon.warning { background: var(--jx-warning-tint); color: var(--jx-warning-text); }
.stat-card .stat-icon.danger { background: var(--jx-danger-tint); color: var(--jx-danger-text); }
.stat-card .stat-icon.info { background: var(--jx-info-tint); color: var(--jx-info-text); }
.stat-card .stat-title {
  color: var(--jx-text-secondary);
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.stat-card .stat-value {
  font-family: var(--jx-font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--jx-text-primary);
}

/* ============ 快捷操作 ============ */
.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  background: var(--jx-bg-card);
  border: 1px solid var(--jx-border-subtle);
  border-radius: var(--jx-radius-md);
  text-decoration: none;
  color: var(--jx-text-primary);
  transition: all 0.25s ease;
}
.quick-action-card:hover {
  border-color: var(--jx-gold-border);
  box-shadow: var(--jx-glow-gold);
  transform: translateY(-3px);
  color: var(--jx-text-primary);
}
.quick-action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 8px;
}
.quick-action-card span {
  font-size: 0.85rem;
  font-weight: 500;
}

/* 渐变图标底(与设计稿一致) */
.bg-primary-g { background: linear-gradient(135deg, var(--jx-gold), var(--jx-gold-dark)); }
.bg-success-g { background: linear-gradient(135deg, var(--jx-success), #1E6B46); }
.bg-warning-g { background: linear-gradient(135deg, var(--jx-warning), var(--jx-gold-dark)); }
.bg-info-g { background: linear-gradient(135deg, var(--jx-info), #3D5A80); }
.bg-danger-g { background: linear-gradient(135deg, var(--jx-danger), #8E2A20); }
.bg-secondary-g { background: linear-gradient(135deg, #6B7280, #4B5563); }

/* 兼容旧的 bg-primary 等 */
.bg-primary { background: linear-gradient(135deg, var(--jx-gold), var(--jx-gold-dark)) !important; }
.bg-success { background: linear-gradient(135deg, var(--jx-success), #1E6B46) !important; }
.bg-warning { background: linear-gradient(135deg, var(--jx-warning), var(--jx-gold-dark)) !important; }

/* ============ 浅色类深色化覆盖(修复白底白字) ============ */
.bg-light,
.bg-white {
  background-color: var(--jx-bg-hover) !important;
  color: var(--jx-text-primary) !important;
}

.bg-body,
.bg-body-tertiary {
  background-color: var(--jx-bg-canvas) !important;
  color: var(--jx-text-primary) !important;
}

/* 表头浅色类 → 深色表头 */
.table-light,
.table-light th,
.table-light td {
  --bs-table-bg: rgba(255, 255, 255, 0.04) !important;
  --bs-table-color: var(--jx-text-primary) !important;
  --bs-table-border-color: var(--jx-border-subtle) !important;
  color: var(--jx-text-primary) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* 卡片头/尾浅色 → 深色 */
.card-header.bg-light,
.card-footer.bg-white {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: var(--jx-text-primary) !important;
  border-color: var(--jx-border-subtle) !important;
}

/* text-dark 在深色主题下修正 */
.text-dark {
  color: var(--jx-text-primary) !important;
}
.bg-info { background: linear-gradient(135deg, var(--jx-info), #3D5A80) !important; }
.bg-danger { background: linear-gradient(135deg, var(--jx-danger), #8E2A20) !important; }
.bg-secondary { background: #4B5563 !important; }

/* ============ 数据表容器 ============ */
.data-card {
  background: var(--jx-bg-card);
  border: 1px solid var(--jx-border-subtle);
  border-radius: var(--jx-radius-lg);
  overflow: hidden;
}
.data-card-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--jx-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.data-card-body {
  padding: 0;
}

/* ============ 等宽数字 ============ */
.mono, .font-mono {
  font-family: var(--jx-font-mono) !important;
}
.amount, .order-no {
  font-family: var(--jx-font-mono);
}

/* ============ 打印样式 ============ */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
}

/* ============ SweetAlert2 深色 ============ */
.swal2-popup {
  background: var(--jx-bg-panel) !important;
  border: 1px solid var(--jx-border-strong) !important;
  border-radius: 16px !important;
  color: var(--jx-text-primary) !important;
}
.swal2-title, .swal2-html-container {
  color: var(--jx-text-primary) !important;
}

/* ============ 移动端响应式增强 ============ */
@media (max-width: 767.98px) {
  /* 移动端表格更紧凑,减少横向滚动 */
  .table thead th,
  .table tbody td {
    padding: 10px 12px;
    font-size: 0.8rem;
  }
  .table .btn-sm { padding: 4px 8px; font-size: 0.75rem; }

  /* 卡片式内容在移动端加大触控目标 */
  .card-body .btn { min-height: 38px; }

  /* 筛选区在移动端按钮占满 */
  .filter-card .btn { min-height: 40px; }

  /* 页面标题在移动端更紧凑 */
  .page-head h4 { font-size: 1.25rem; }

  /* 表单控件移动端高度(避免 iOS 缩放) */
  .form-control, .form-select {
    font-size: 16px;
    min-height: 44px;
  }

  /* 统计卡移动端密度 */
  .stat-card { padding: 16px; }
  .stat-card .stat-value { font-size: 1.35rem; }

  /* 快捷操作移动端 */
  .quick-action-icon { width: 40px; height: 40px; font-size: 1.2rem; }
  .quick-action-card span { font-size: 0.75rem; }
  .quick-action-card { padding: 14px 6px; }

  /* 数据卡头部堆叠 */
  .data-card-header { padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 8px; }

  /* 移动端弹窗全宽 */
  .modal-dialog { margin: 0; }
  .modal-content { border-radius: 16px 16px 0 0; }
}

/* 极窄屏(手机竖屏) */
@media (max-width: 575.98px) {
  /* 移动端底部导航上方留白已在布局处理,这里补内容底部安全区 */
  .content-wrapper { padding-bottom: 110px !important; }

  /* 表格操作列图标按钮加大 */
  .btn-icon { width: 38px !important; height: 38px !important; }
}

/* ============ 移动端卡片美化(统一质感) ============ */
@media (max-width: 767.98px) {
  /* 移动端卡片:更深邃的层次 */
  .card,
  .data-card {
    border-radius: 14px;
    background: linear-gradient(160deg, var(--jx-bg-card) 0%, var(--jx-bg-sunken) 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  }

  /* 列表式卡片(移动端表格替代)内边距优化 */
  .card-body { padding: 14px 16px; }

  /* 状态徽章在卡片上更醒目 */
  .card .status-badge,
  .card .badge { font-size: 0.72rem; padding: 3px 10px; }

  /* 卡片内等宽金额加大,便于移动端阅读 */
  .card .order-no,
  .card .mono,
  .card [style*="font-family:var(--jx-font-mono)"] { letter-spacing: 0.3px; }

  /* 首页统计卡移动端:更饱满 */
  .stat-card {
    border-radius: 16px;
    background: linear-gradient(160deg, var(--jx-bg-card) 0%, var(--jx-bg-sunken) 100%);
  }
  .stat-card .stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.05rem;
  }

  /* 快捷操作卡:金色 hover 提示 */
  .quick-action-card:active {
    transform: scale(0.96);
    border-color: var(--jx-gold);
  }

  /* 最近销售/订单卡片:关键数字强调 */
  .card .text-end .fw-bold,
  .card .amount-value { color: var(--jx-gold-bright); }

  /* 采购订单卡片细节 */
  .card .order-no { color: var(--jx-gold-bright); }
}

/* ============ Bootstrap 边框工具类深色化(分隔线) ============ */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--jx-border-subtle) !important;
}

/* 卡片内分隔线:更柔和的深色 */
.card .border-bottom,
.card .border-top,
.card-body .border-bottom,
.card-body .border-top {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* 阴影/描边类深色化 */
.border-primary { border-color: var(--jx-gold) !important; }
.border-secondary { border-color: var(--jx-border-strong) !important; }
.border-success { border-color: rgba(76, 175, 128, 0.4) !important; }
.border-danger { border-color: rgba(232, 116, 97, 0.4) !important; }
.border-warning { border-color: rgba(217, 179, 106, 0.4) !important; }

/* ============================================================
   JXC 主题配色系统 · 三套可切换主题
   data-theme="gold"  黑金商务(默认)
   data-theme="blue"  蓝紫科技
   data-theme="green" 翡翠青绿
   通过系统设置 → 主题配色 切换,body 上输出 data-theme 属性
   ============================================================ */

/* ---------- 蓝紫科技 ---------- */
body[data-theme="blue"] {
  --jx-gold: #6C7CFF;
  --jx-gold-bright: #8B9BFF;
  --jx-gold-dark: #4A55C4;
  --jx-gold-tint: rgba(108, 124, 255, 0.15);
  --jx-gold-border: rgba(108, 124, 255, 0.4);
  --jx-bg-canvas: #0B0E1A;
  --jx-bg-panel: #12162A;
  --jx-bg-card: #171C33;
  --jx-bg-hover: #1E2440;
  --jx-bg-sunken: #0E1223;
  --jx-text-primary: #F5F7FF;
  --jx-text-secondary: rgba(245, 247, 255, 0.66);
  --jx-text-muted: rgba(245, 247, 255, 0.4);
  --jx-border-subtle: #262C4A;
  --jx-border-strong: #30385C;
  --jx-warning-text: #8B9BFF;
  --jx-warning-tint: rgba(108, 124, 255, 0.16);
}

/* ---------- 翡翠青绿 ---------- */
body[data-theme="green"] {
  --jx-gold: #1E7A52;
  --jx-gold-bright: #2E9E6B;
  --jx-gold-dark: #155E3F;
  --jx-gold-tint: rgba(30, 122, 82, 0.12);
  --jx-gold-border: rgba(30, 122, 82, 0.35);
  --jx-bg-canvas: #F0F5F1;
  --jx-bg-panel: #F7FAF8;
  --jx-bg-card: #FFFFFF;
  --jx-bg-hover: #E9F0EB;
  --jx-bg-sunken: #E2EBE5;
  --jx-text-primary: #16241C;
  --jx-text-secondary: rgba(22, 36, 28, 0.66);
  --jx-text-muted: rgba(22, 36, 28, 0.42);
  --jx-border-subtle: #DCE8E0;
  --jx-border-strong: #CFDFD4;
  --jx-warning-text: #1E7A52;
  --jx-warning-tint: rgba(30, 122, 82, 0.12);
}

/* ---------- 主题配色选择卡(系统设置页) ---------- */
.theme-option { display: block; position: relative; }
.theme-option .theme-card {
    border: 2px solid var(--jx-border-subtle);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.25s ease;
    background: var(--jx-bg-card);
}
.theme-option:hover .theme-card { border-color: var(--jx-border-strong); transform: translateY(-2px); }
.theme-option.selected .theme-card {
    border-color: var(--jx-gold);
    box-shadow: 0 0 0 3px var(--jx-gold-tint), 0 6px 20px rgba(0,0,0,0.3);
}
.theme-preview { height: 88px; display: flex; align-items: flex-end; padding: 10px; }
.theme-preview-panel {
    width: 100%; border-radius: 8px; padding: 8px 10px;
    display: flex; flex-direction: column; gap: 5px;
}
.theme-preview-panel .tp-line { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.14); }
.theme-preview-panel .tp-line:first-child { width: 55%; background: inherit; }
.theme-meta { padding: 10px 12px 12px; }
.theme-check {
    position: absolute; top: 10px; right: 10px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--jx-gold); color: #0A0A0A;
    display: none; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
.theme-option.selected .theme-check { display: flex; }


/* ---------- 奶白灰(浅色主题) ---------- */
body[data-theme="cream"] {
  --jx-gold: #B8860B;
  --jx-gold-bright: #C9971E;
  --jx-gold-dark: #8B6508;
  --jx-gold-tint: rgba(184, 134, 11, 0.12);
  --jx-gold-border: rgba(184, 134, 11, 0.35);
  --jx-bg-canvas: #F4F1EA;
  --jx-bg-panel: #FBFAF7;
  --jx-bg-card: #FFFFFF;
  --jx-bg-hover: #F0EDE6;
  --jx-bg-sunken: #ECE8E0;
  --jx-text-primary: #1F1D19;
  --jx-text-secondary: rgba(31, 29, 25, 0.66);
  --jx-text-muted: rgba(31, 29, 25, 0.42);
  --jx-border-subtle: #E5E1D8;
  --jx-border-strong: #D8D3C8;
  --jx-success: #2E8B57;
  --jx-success-text: #1E7A4F;
  --jx-success-tint: rgba(46, 139, 87, 0.12);
  --jx-warning: #D4A017;
  --jx-warning-text: #9A6B00;
  --jx-warning-tint: rgba(212, 160, 23, 0.12);
  --jx-danger: #C0392B;
  --jx-danger-text: #B03A2E;
  --jx-danger-tint: rgba(192, 57, 43, 0.12);
  --jx-info: #5B78A0;
  --jx-info-text: #4A6A95;
  --jx-info-tint: rgba(91, 120, 160, 0.12);
}

/* ---------- 奶白灰浅色主题修正(深色假设组件适配) ---------- */
body[data-theme="cream"] .bottom-nav, body[data-theme="green"] .bottom-nav {
  background: rgba(255, 255, 255, 0.92) !important;
}
body[data-theme="cream"] .bottom-nav-inner, body[data-theme="green"] .bottom-nav-inner {
  background: #FFFFFF !important;
  border-color: var(--jx-border-subtle) !important;
  box-shadow: 0 8px 32px rgba(31, 29, 25, 0.1) !important;
}
body[data-theme="cream"] .bottom-nav-link:not(.active), body[data-theme="green"] .bottom-nav-link:not(.active) {
  background: rgba(31, 29, 25, 0.05) !important;
  border-color: rgba(31, 29, 25, 0.06) !important;
}
/* 浅色主题下选中态:恢复金色渐变 + 深色文字,保证对比度 */
body[data-theme="cream"] .bottom-nav-link.active, body[data-theme="green"] .bottom-nav-link.active {
  background: linear-gradient(135deg, var(--jx-gold-bright), var(--jx-gold)) !important;
  color: var(--jx-text-primary) !important;
  box-shadow: 0 4px 18px rgba(31, 29, 25, 0.28) !important;
}
body[data-theme="cream"] .bottom-nav-link.active .tab-icon, body[data-theme="green"] .bottom-nav-link.active .tab-icon {
  background: rgba(31, 29, 25, 0.12) !important;
  border-color: rgba(31, 29, 25, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35) !important;
}
body[data-theme="cream"] .bottom-nav-link .tab-warn-dot, body[data-theme="green"] .bottom-nav-link .tab-warn-dot {
  border-color: #FFFFFF !important;
}
body[data-theme="cream"] .sidebar, body[data-theme="green"] .sidebar {
  background: var(--jx-bg-panel) !important;
  border-right-color: var(--jx-border-subtle) !important;
}
body[data-theme="cream"] .menu-item:hover, body[data-theme="green"] .menu-item:hover {
  background: var(--jx-bg-hover) !important;
}
body[data-theme="cream"] .menu-item.active, body[data-theme="green"] .menu-item.active {
  background: var(--jx-gold-tint) !important;
  border-color: var(--jx-gold-border) !important;
  color: var(--jx-gold-dark) !important;
}
body[data-theme="cream"] .menu-item.active .menu-icon, body[data-theme="green"] .menu-item.active .menu-icon {
  background: linear-gradient(135deg, var(--jx-gold-bright), var(--jx-gold-dark)) !important;
}
body[data-theme="cream"] .menu-group-title, body[data-theme="green"] .menu-group-title {
  color: rgba(31, 29, 25, 0.4) !important;
}
body[data-theme="cream"] .header, body[data-theme="green"] .header {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom-color: var(--jx-border-subtle) !important;
}
body[data-theme="cream"] .header-search, body[data-theme="green"] .header-search,
body[data-theme="cream"] .header-btn, body[data-theme="green"] .header-btn,
body[data-theme="cream"] .user-dropdown, body[data-theme="green"] .user-dropdown {
  background: rgba(31, 29, 25, 0.04) !important;
  border-color: var(--jx-border-subtle) !important;
}
body[data-theme="cream"] .header-btn, body[data-theme="green"] .header-btn .header-dot {
  box-shadow: 0 0 0 2px #FBFAF7;
}
/* 移动端卡片渐变方向修正(浅色下 sunken 更深,反了会发暗) */
@media (max-width: 767.98px) {
  body[data-theme="cream"] .card, body[data-theme="green"] .card,
  body[data-theme="cream"] .data-card, body[data-theme="green"] .data-card,
  body[data-theme="cream"] .stat-card, body[data-theme="green"] .stat-card {
    background: #FFFFFF !important;
  }
}
/* 主按钮保持金色深字 */
body[data-theme="cream"] .btn-primary, body[data-theme="green"] .btn-primary,
body[data-theme="cream"] .btn-gold, body[data-theme="green"] .btn-gold {
  background: linear-gradient(135deg, var(--jx-gold-bright), var(--jx-gold)) !important;
  color: #FFFFFF !important;
  border: none !important;
}
/* 侧边栏品牌区金色 logo 文字加深 */
body[data-theme="cream"] .sidebar-brand, body[data-theme="green"] .sidebar-brand .brand-logo {
  color: #FFFFFF !important;
}

/* ---------- 浅色主题按钮适配(清空/次要按钮) ---------- */
body[data-theme="cream"] .btn-secondary,
body[data-theme="green"] .btn-secondary {
  --bs-btn-bg: rgba(31, 29, 25, 0.05);
  --bs-btn-border-color: var(--jx-border-strong);
  --bs-btn-color: var(--jx-text-primary);
  --bs-btn-hover-bg: rgba(31, 29, 25, 0.09);
  --bs-btn-hover-color: var(--jx-text-primary);
  --bs-btn-active-bg: rgba(31, 29, 25, 0.12);
  --bs-btn-active-color: var(--jx-text-primary);
}