/**
 * 靓淘商家端管理系统 - 多行业主题系统 V3.0
 * 基于SAAS版UI设计规范 — 7大行业主题 · CSS变量驱动 · 一键切换
 *
 * 默认主题：品质零售型 #2B5FD7
 */

/* ================================================================
   1. 全局CSS变量（设计Token体系）— 默认主题 品质零售型
   ================================================================ */
:root,
[data-theme="retail"] {
  /* ── 品牌色系 ── */
  --brand-primary: #2B5FD7;
  --brand-primary-hover: #1E4BBF;
  --brand-primary-light: rgba(43, 95, 215, 0.08);
  --brand-primary-soft: rgba(43, 95, 215, 0.15);
  --brand-gradient: linear-gradient(135deg, #1E4BBF 0%, #2B5FD7 50%, #5B8DEF 100%);

  /* ── 功能色系 ── */
  --color-success: #20A67D;
  --color-success-hover: #178A68;
  --color-warning: #E8A317;
  --color-warning-hover: #C68A10;
  --color-danger: #DC3545;
  --color-danger-hover: #C82333;
  --color-info: #17A2B8;

  /* ── 文字色系 ── */
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;

  /* ── 布局色系 ── */
  --border-color: #E2E8F0;
  --border-light: #F0F4F8;
  --bg-page: #F5F7FA;
  --bg-card: #FFFFFF;
  --bg-light: #F8FAFC;
  --bg-hover: #F1F5F9;

  /* ── 阴影体系 ── */
  --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 4px 15px rgba(0, 0, 0, 0.12);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);

  /* ── 圆角体系 ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── 间距体系 ── */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* ── 过渡 ── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.35s ease;

  /* ── 导航栏色系 ── */
  --navbar-bg: linear-gradient(135deg, #0F2145 0%, #1B3A6C 50%, #112648 100%);
  --navbar-brand-gradient: linear-gradient(135deg, #5B8DEF, #2B5FD7);
  --navbar-link-color: rgba(255, 255, 255, 0.85);
  --navbar-link-hover-color: #ffffff;
  --navbar-link-active-color: #ffffff;
  --navbar-link-hover: rgba(43, 95, 215, 0.15);
  --navbar-link-active: rgba(43, 95, 215, 0.25);
  --sidebar-bg: linear-gradient(180deg, #F0F5FF 0%, #E8EFFA 100%);
  --sidebar-active-bg: linear-gradient(135deg, #2B5FD7, #1E4BBF);
  --sidebar-active-color: #FFFFFF;
  --sidebar-hover-bg: rgba(43, 95, 215, 0.08);
  --sidebar-hover-color: #1E4BBF;
  --sidebar-heading-color: #1E4BBF;
  --sidebar-border: #D8E4FA;

  /* ── 卡片色系 ── */
  --card-header-gradient: linear-gradient(135deg, #2B5FD7, #1E4BBF);
  --card-header-color: #FFFFFF;
  --card-border-color: #E8EFFA;
  --card-accent-color: #2B5FD7;

  /* ── 统计卡片色系 ── */
  --stat-value-color: #2B5FD7;
  --stat-accent-border: #2B5FD7;

  /* ── 按钮色系 ── */
  --btn-primary-bg: var(--brand-gradient);
  --btn-primary-hover: linear-gradient(135deg, #1E4BBF, #1540A0);
  --btn-primary-shadow: 0 4px 12px rgba(43, 95, 215, 0.3);

  /* ── 分页/进度条 ── */
  --pagination-active-bg: linear-gradient(135deg, #2B5FD7, #1E4BBF);
  --pagination-active-border: #2B5FD7;
  --progress-bar-bg: linear-gradient(90deg, #2B5FD7, #5B8DEF);

  /* ── 导航下拉菜单 ── */
  --dropdown-header-color: #1E4BBF;
  --dropdown-header-bg: #F0F5FF;
  --dropdown-item-hover-color: #1E4BBF;
  --dropdown-item-hover-bg: #E8F0FF;
  --dropdown-border-top: #2B5FD7;
  --dropdown-bg: #FFFFFF;
  --dropdown-text: #1E293B;

  /* ── ECharts图表色板 ── */
  --chart-color-1: #2B5FD7;
  --chart-color-2: #5B8DEF;
  --chart-color-3: #20A67D;
  --chart-color-4: #E8A317;
  --chart-color-5: #DC3545;
  --chart-color-6: #8B5CF6;
  --chart-color-7: #FF7A2F;
  --chart-color-8: #2D9CDB;
}

/* ================================================================
   2. 7大行业主题定义
   ================================================================ */

/* ── 主题1：活力消费型 #FF7A2F ── */
[data-theme="consumer"] {
  --brand-primary: #FF7A2F;
  --brand-primary-hover: #E56820;
  --brand-primary-light: rgba(255, 122, 47, 0.08);
  --brand-primary-soft: rgba(255, 122, 47, 0.15);
  --brand-gradient: linear-gradient(135deg, #E56820 0%, #FF7A2F 50%, #FFA366 100%);

  --navbar-bg: linear-gradient(135deg, #1C0E04 0%, #3D1C08 50%, #1F1006 100%);
  --navbar-brand-gradient: linear-gradient(135deg, #FFA366, #FF7A2F);
  --navbar-link-color: rgba(255, 255, 255, 0.85);
  --navbar-link-hover-color: #ffffff;
  --navbar-link-active-color: #ffffff;
  --navbar-link-hover: rgba(255, 122, 47, 0.15);
  --navbar-link-active: rgba(255, 122, 47, 0.25);
  --sidebar-bg: linear-gradient(180deg, #FFF5F0 0%, #FFEDE4 100%);
  --sidebar-active-bg: linear-gradient(135deg, #FF7A2F, #E56820);
  --sidebar-hover-bg: rgba(255, 122, 47, 0.08);
  --sidebar-hover-color: #E56820;
  --sidebar-heading-color: #E56820;
  --sidebar-border: #FADCC8;

  --card-header-gradient: linear-gradient(135deg, #FF7A2F, #E56820);
  --card-accent-color: #FF7A2F;
  --stat-value-color: #FF7A2F;
  --stat-accent-border: #FF7A2F;

  --pagination-active-bg: linear-gradient(135deg, #FF7A2F, #E56820);
  --pagination-active-border: #FF7A2F;
  --progress-bar-bg: linear-gradient(90deg, #FF7A2F, #FFA366);

  --dropdown-header-color: #E56820;
  --dropdown-header-bg: #FFF5F0;
  --dropdown-item-hover-color: #E56820;
  --dropdown-item-hover-bg: #FFF0E8;
  --dropdown-border-top: #FF7A2F;

  --btn-primary-bg: var(--brand-gradient);
  --btn-primary-hover: linear-gradient(135deg, #E56820, #C85810);
  --btn-primary-shadow: 0 4px 12px rgba(255, 122, 47, 0.3);

  /* ── ECharts图表色板 ── */
  --chart-color-1: #FF7A2F;
  --chart-color-2: #FFA366;
  --chart-color-3: #20A67D;
  --chart-color-4: #E8A317;
  --chart-color-5: #DC3545;
  --chart-color-6: #8B5CF6;
  --chart-color-7: #2B5FD7;
  --chart-color-8: #2D9CDB;
}

/* ── 主题2：品质零售型 #2B5FD7 (默认，已在 :root 定义) ── */

/* ── 主题3：专业服务型 #C9A96E ── */
[data-theme="service"] {
  --brand-primary: #C9A96E;
  --brand-primary-hover: #B8975A;
  --brand-primary-light: rgba(201, 169, 110, 0.08);
  --brand-primary-soft: rgba(201, 169, 110, 0.15);
  --brand-gradient: linear-gradient(135deg, #A0894C 0%, #C9A96E 50%, #E0C993 100%);

  --navbar-bg: linear-gradient(135deg, #1A1814 0%, #2D2920 50%, #1C1A15 100%);
  --navbar-brand-gradient: linear-gradient(135deg, #E0C993, #C9A96E);
  --navbar-link-color: rgba(255, 255, 255, 0.85);
  --navbar-link-hover-color: #ffffff;
  --navbar-link-active-color: #ffffff;
  --navbar-link-hover: rgba(201, 169, 110, 0.15);
  --navbar-link-active: rgba(201, 169, 110, 0.25);
  --sidebar-bg: linear-gradient(180deg, #FDFBF7 0%, #F7F1E5 100%);
  --sidebar-active-bg: linear-gradient(135deg, #C9A96E, #B8975A);
  --sidebar-hover-bg: rgba(201, 169, 110, 0.08);
  --sidebar-hover-color: #B8975A;
  --sidebar-heading-color: #B8975A;
  --sidebar-border: #EDE3CF;

  --card-header-gradient: linear-gradient(135deg, #C9A96E, #B8975A);
  --card-accent-color: #C9A96E;
  --stat-value-color: #C9A96E;
  --stat-accent-border: #C9A96E;

  --pagination-active-bg: linear-gradient(135deg, #C9A96E, #B8975A);
  --pagination-active-border: #C9A96E;
  --progress-bar-bg: linear-gradient(90deg, #C9A96E, #E0C993);

  --dropdown-header-color: #B8975A;
  --dropdown-header-bg: #FDFBF7;
  --dropdown-item-hover-color: #B8975A;
  --dropdown-item-hover-bg: #F8F3E8;
  --dropdown-border-top: #C9A96E;

  --btn-primary-bg: var(--brand-gradient);
  --btn-primary-hover: linear-gradient(135deg, #B8975A, #9E7D40);
  --btn-primary-shadow: 0 4px 12px rgba(201, 169, 110, 0.3);

  /* ── ECharts图表色板 ── */
  --chart-color-1: #C9A96E;
  --chart-color-2: #E0C993;
  --chart-color-3: #20A67D;
  --chart-color-4: #D4A017;
  --chart-color-5: #DC3545;
  --chart-color-6: #7C6DB5;
  --chart-color-7: #2B5FD7;
  --chart-color-8: #2D9CDB;
}

/* ── 主题4：科技效率型 #1E2A4A ── */
[data-theme="tech"] {
  --brand-primary: #1E2A4A;
  --brand-primary-hover: #162038;
  --brand-primary-light: rgba(30, 42, 74, 0.08);
  --brand-primary-soft: rgba(30, 42, 74, 0.15);
  --brand-gradient: linear-gradient(135deg, #111B33 0%, #1E2A4A 50%, #3A5080 100%);

  --navbar-bg: linear-gradient(135deg, #0A0F1E 0%, #131A2E 50%, #0C1122 100%);
  --navbar-brand-gradient: linear-gradient(135deg, #5B8DEF, #3A5080);
  --navbar-link-color: rgba(255, 255, 255, 0.85);
  --navbar-link-hover-color: #ffffff;
  --navbar-link-active-color: #ffffff;
  --navbar-link-hover: rgba(58, 80, 128, 0.15);
  --navbar-link-active: rgba(58, 80, 128, 0.25);
  --sidebar-bg: linear-gradient(180deg, #F0F2F7 0%, #E4E8F2 100%);
  --sidebar-active-bg: linear-gradient(135deg, #1E2A4A, #162038);
  --sidebar-hover-bg: rgba(30, 42, 74, 0.06);
  --sidebar-hover-color: #162038;
  --sidebar-heading-color: #162038;
  --sidebar-border: #D0D4E0;

  --card-header-gradient: linear-gradient(135deg, #1E2A4A, #162038);
  --card-accent-color: #1E2A4A;
  --stat-value-color: #1E2A4A;
  --stat-accent-border: #1E2A4A;

  --pagination-active-bg: linear-gradient(135deg, #1E2A4A, #162038);
  --pagination-active-border: #1E2A4A;
  --progress-bar-bg: linear-gradient(90deg, #1E2A4A, #3A5080);

  --dropdown-header-color: #162038;
  --dropdown-header-bg: #F0F2F7;
  --dropdown-item-hover-color: #162038;
  --dropdown-item-hover-bg: #EBEEF5;
  --dropdown-border-top: #1E2A4A;

  --btn-primary-bg: var(--brand-gradient);
  --btn-primary-hover: linear-gradient(135deg, #162038, #0D1528);
  --btn-primary-shadow: 0 4px 12px rgba(30, 42, 74, 0.3);

  /* ── ECharts图表色板 ── */
  --chart-color-1: #1E2A4A;
  --chart-color-2: #3D4F8A;
  --chart-color-3: #20A67D;
  --chart-color-4: #E8A317;
  --chart-color-5: #DC3545;
  --chart-color-6: #8B5CF6;
  --chart-color-7: #FF7A2F;
  --chart-color-8: #2D9CDB;
}

/* ── 主题5：健康生活型 #2D9B6E ── */
[data-theme="health"] {
  --brand-primary: #2D9B6E;
  --brand-primary-hover: #25855D;
  --brand-primary-light: rgba(45, 155, 110, 0.08);
  --brand-primary-soft: rgba(45, 155, 110, 0.15);
  --brand-gradient: linear-gradient(135deg, #1E7A52 0%, #2D9B6E 50%, #5BBF92 100%);

  --navbar-bg: linear-gradient(135deg, #081C14 0%, #123025 50%, #0A1F16 100%);
  --navbar-brand-gradient: linear-gradient(135deg, #5BBF92, #2D9B6E);
  --navbar-link-color: rgba(255, 255, 255, 0.85);
  --navbar-link-hover-color: #ffffff;
  --navbar-link-active-color: #ffffff;
  --navbar-link-hover: rgba(45, 155, 110, 0.15);
  --navbar-link-active: rgba(45, 155, 110, 0.25);
  --sidebar-bg: linear-gradient(180deg, #F0FAF5 0%, #E4F5EC 100%);
  --sidebar-active-bg: linear-gradient(135deg, #2D9B6E, #25855D);
  --sidebar-hover-bg: rgba(45, 155, 110, 0.08);
  --sidebar-hover-color: #25855D;
  --sidebar-heading-color: #25855D;
  --sidebar-border: #CDE8D8;

  --card-header-gradient: linear-gradient(135deg, #2D9B6E, #25855D);
  --card-accent-color: #2D9B6E;
  --stat-value-color: #2D9B6E;
  --stat-accent-border: #2D9B6E;

  --pagination-active-bg: linear-gradient(135deg, #2D9B6E, #25855D);
  --pagination-active-border: #2D9B6E;
  --progress-bar-bg: linear-gradient(90deg, #2D9B6E, #5BBF92);

  --dropdown-header-color: #25855D;
  --dropdown-header-bg: #F0FAF5;
  --dropdown-item-hover-color: #25855D;
  --dropdown-item-hover-bg: #E8F5EF;
  --dropdown-border-top: #2D9B6E;

  --btn-primary-bg: var(--brand-gradient);
  --btn-primary-hover: linear-gradient(135deg, #25855D, #1B6E48);
  --btn-primary-shadow: 0 4px 12px rgba(45, 155, 110, 0.3);

  /* ── ECharts图表色板 ── */
  --chart-color-1: #2D9B6E;
  --chart-color-2: #5CBF8A;
  --chart-color-3: #2B5FD7;
  --chart-color-4: #E8A317;
  --chart-color-5: #DC3545;
  --chart-color-6: #8B5CF6;
  --chart-color-7: #FF7A2F;
  --chart-color-8: #20A67D;
}

/* ── 主题6：文创艺术型 #8B5CF6 ── */
[data-theme="art"] {
  --brand-primary: #8B5CF6;
  --brand-primary-hover: #7A48E0;
  --brand-primary-light: rgba(139, 92, 246, 0.08);
  --brand-primary-soft: rgba(139, 92, 246, 0.15);
  --brand-gradient: linear-gradient(135deg, #6D3DE0 0%, #8B5CF6 50%, #B794FF 100%);

  --navbar-bg: linear-gradient(135deg, #120B24 0%, #1F1440 50%, #140D28 100%);
  --navbar-brand-gradient: linear-gradient(135deg, #B794FF, #8B5CF6);
  --navbar-link-color: rgba(255, 255, 255, 0.85);
  --navbar-link-hover-color: #ffffff;
  --navbar-link-active-color: #ffffff;
  --navbar-link-hover: rgba(139, 92, 246, 0.15);
  --navbar-link-active: rgba(139, 92, 246, 0.25);
  --sidebar-bg: linear-gradient(180deg, #F6F2FF 0%, #EDE4FF 100%);
  --sidebar-active-bg: linear-gradient(135deg, #8B5CF6, #7A48E0);
  --sidebar-hover-bg: rgba(139, 92, 246, 0.08);
  --sidebar-hover-color: #7A48E0;
  --sidebar-heading-color: #7A48E0;
  --sidebar-border: #E0D4F8;

  --card-header-gradient: linear-gradient(135deg, #8B5CF6, #7A48E0);
  --card-accent-color: #8B5CF6;
  --stat-value-color: #8B5CF6;
  --stat-accent-border: #8B5CF6;

  --pagination-active-bg: linear-gradient(135deg, #8B5CF6, #7A48E0);
  --pagination-active-border: #8B5CF6;
  --progress-bar-bg: linear-gradient(90deg, #8B5CF6, #B794FF);

  --dropdown-header-color: #7A48E0;
  --dropdown-header-bg: #F6F2FF;
  --dropdown-item-hover-color: #7A48E0;
  --dropdown-item-hover-bg: #F0EAFF;
  --dropdown-border-top: #8B5CF6;

  --btn-primary-bg: var(--brand-gradient);
  --btn-primary-hover: linear-gradient(135deg, #7A48E0, #6835D0);
  --btn-primary-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);

  /* ── ECharts图表色板 ── */
  --chart-color-1: #8B5CF6;
  --chart-color-2: #A78BFA;
  --chart-color-3: #20A67D;
  --chart-color-4: #E8A317;
  --chart-color-5: #DC3545;
  --chart-color-6: #2B5FD7;
  --chart-color-7: #FF7A2F;
  --chart-color-8: #2D9CDB;
}

/* ── 主题7：社交社区型 #F97316 ── */
[data-theme="social"] {
  --brand-primary: #F97316;
  --brand-primary-hover: #E0640A;
  --brand-primary-light: rgba(249, 115, 22, 0.08);
  --brand-primary-soft: rgba(249, 115, 22, 0.15);
  --brand-gradient: linear-gradient(135deg, #D95E0A 0%, #F97316 50%, #FB923C 100%);

  --navbar-bg: linear-gradient(135deg, #1C0B02 0%, #361608 50%, #200D03 100%);
  --navbar-brand-gradient: linear-gradient(135deg, #FB923C, #F97316);
  --navbar-link-color: rgba(255, 255, 255, 0.85);
  --navbar-link-hover-color: #ffffff;
  --navbar-link-active-color: #ffffff;
  --navbar-link-hover: rgba(249, 115, 22, 0.15);
  --navbar-link-active: rgba(249, 115, 22, 0.25);
  --sidebar-bg: linear-gradient(180deg, #FFF7F0 0%, #FFEDE0 100%);
  --sidebar-active-bg: linear-gradient(135deg, #F97316, #E0640A);
  --sidebar-hover-bg: rgba(249, 115, 22, 0.08);
  --sidebar-hover-color: #E0640A;
  --sidebar-heading-color: #E0640A;
  --sidebar-border: #FAD4B8;

  --card-header-gradient: linear-gradient(135deg, #F97316, #E0640A);
  --card-accent-color: #F97316;
  --stat-value-color: #F97316;
  --stat-accent-border: #F97316;

  --pagination-active-bg: linear-gradient(135deg, #F97316, #D95E0A);
  --pagination-active-border: #F97316;
  --progress-bar-bg: linear-gradient(90deg, #F97316, #FB923C);

  --dropdown-header-color: #E0640A;
  --dropdown-header-bg: #FFF7F0;
  --dropdown-item-hover-color: #E0640A;
  --dropdown-item-hover-bg: #FFF0E4;
  --dropdown-border-top: #F97316;

  --btn-primary-bg: var(--brand-gradient);
  --btn-primary-hover: linear-gradient(135deg, #E0640A, #C85208);
  --btn-primary-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);

  /* ── ECharts图表色板 ── */
  --chart-color-1: #F97316;
  --chart-color-2: #FB923C;
  --chart-color-3: #20A67D;
  --chart-color-4: #E8A317;
  --chart-color-5: #DC3545;
  --chart-color-6: #8B5CF6;
  --chart-color-7: #2B5FD7;
  --chart-color-8: #2D9CDB;
}

/* ================================================================
   3. 商家端主题应用 — 导航栏
   ================================================================ */

.merchant-navbar {
  background: var(--navbar-bg) !important;
  border-bottom: 2px solid var(--brand-primary);
}

.merchant-navbar .navbar-brand {
  background: var(--navbar-brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* 导航栏链接颜色 - 提高对比度，确保可读性 */
.merchant-navbar .nav-link {
  color: var(--navbar-link-color) !important;
  transition: color 0.2s, background-color 0.2s;
}

.merchant-navbar .nav-link:hover {
  color: var(--navbar-link-hover-color) !important;
  background-color: var(--navbar-link-hover);
}

.merchant-navbar .nav-link.active {
  color: var(--navbar-link-active-color) !important;
  background-color: var(--navbar-link-active);
}

/* ================================================================
   4. 商家端主题应用 — 侧边栏
   ================================================================ */

.merchant-sidebar-content {
  border-right: 1px solid var(--sidebar-border);
  background: var(--sidebar-bg);
}

.merchant-layout .sidebar-heading {
  color: var(--sidebar-heading-color) !important;
}

.merchant-sidebar-content .nav-link:hover,
.merchant-layout .sidebar-sticky .nav-link:hover {
  background-color: var(--sidebar-hover-bg);
  color: var(--sidebar-hover-color);
}

.merchant-sidebar-content .nav-link.active,
.merchant-layout .sidebar-sticky .nav-link.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-color);
}

.merchant-sidebar-content .nav-link:hover i,
.merchant-layout .sidebar-sticky .nav-link:hover i {
  color: var(--brand-primary);
}

.merchant-sidebar-content .nav-link.active i,
.merchant-layout .sidebar-sticky .nav-link.active i {
  color: var(--sidebar-active-color);
}

/* ================================================================
   5. 商家端主题应用 — 下拉菜单
   ================================================================ */

.merchant-navbar .dropdown-menu {
  background-color: var(--dropdown-bg, #FFFFFF);
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--dropdown-border-top);
  box-shadow: var(--shadow-dropdown);
}

.merchant-navbar .dropdown-header {
  color: var(--dropdown-header-color);
  background-color: var(--dropdown-header-bg);
}

.merchant-navbar .dropdown-item {
  color: var(--dropdown-text, #1E293B);
}

.merchant-navbar .dropdown-item:hover {
  background-color: var(--dropdown-item-hover-bg);
  color: var(--dropdown-item-hover-color);
}

/* ================================================================
   6. 商家端主题应用 — 卡片/面板
   ================================================================ */

.merchant-layout .card {
  border-color: var(--card-border-color);
}

/* 卡片标题自动使用品牌渐变（未手动设置 bg-* 类时） */
.merchant-layout .card-header:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-warning):not(.bg-secondary):not(.bg-dark):not(.bg-light):not(.bg-white):not(.bg-transparent) {
  background: var(--card-header-gradient);
  color: var(--card-header-color);
  font-weight: 600;
}

.merchant-stat-card {
  border-left: 4px solid var(--stat-accent-border);
  border-radius: var(--radius-md);
}

.merchant-stat-card .stat-icon {
  color: var(--brand-primary);
}

/* ================================================================
   7. 商家端主题应用 — 面包屑/分页/进度条
   ================================================================ */

.merchant-layout .breadcrumb-item a {
  color: var(--sidebar-hover-color);
}

.merchant-layout .breadcrumb-item.active {
  color: var(--brand-primary);
}

.merchant-layout .page-item.active .page-link {
  background: var(--pagination-active-bg);
  border-color: var(--pagination-active-border);
}

.merchant-layout .progress-bar {
  background: var(--progress-bar-bg);
}

/* ================================================================
   8. 商家端主题应用 — Outline按钮品牌色覆盖
   ================================================================ */

.merchant-layout .btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.merchant-layout .btn-outline-primary:hover,
.merchant-layout .btn-outline-primary:active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--btn-primary-shadow);
}

/* 实心品牌色按钮（极少数保留场景） */
.merchant-layout .btn-primary {
  background: var(--btn-primary-bg);
  border-color: transparent;
  color: #fff;
  transition: all var(--transition-base);
}

.merchant-layout .btn-primary:hover {
  background: var(--btn-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--btn-primary-shadow);
}

/* 文字链接色 */
.merchant-layout a {
  color: var(--brand-primary);
  transition: color var(--transition-fast);
}

.merchant-layout a:hover {
  color: var(--brand-primary-hover);
}

/* 徽章 */
.merchant-layout .badge.bg-primary {
  background: var(--brand-gradient) !important;
}

/* 激活状态标签页 */
.merchant-layout .nav-tabs .nav-link.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

/* 表单聚焦 */
.merchant-layout .form-control:focus,
.merchant-layout .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem var(--brand-primary-soft);
}

/* ================================================================
   9. 商家端响应式覆盖
   ================================================================ */

@media (max-width: 991px) and (min-width: 768px) {
  .merchant-navbar .dropdown-menu {
    border-left-color: var(--brand-primary);
  }
  .merchant-navbar .nav-link.active {
    background-color: var(--navbar-link-active);
  }
}

@media (max-width: 767px) {
  .merchant-navbar .dropdown-menu {
    border-left-color: var(--brand-primary);
  }
  .merchant-navbar .nav-link.active {
    background-color: var(--navbar-link-active);
  }
}

/* ================================================================
   10. 主题切换器样式
   ================================================================ */

.theme-switcher-btn {
  color: var(--navbar-link-color) !important;
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem !important;
  transition: all var(--transition-base);
}

.theme-switcher-btn:hover {
  color: var(--navbar-link-hover-color) !important;
  background-color: var(--navbar-link-hover) !important;
}

.theme-switcher-menu {
  min-width: 320px;
  padding: 8px;
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--dropdown-border-top);
  background-color: var(--dropdown-bg, #FFFFFF);
  box-shadow: var(--shadow-dropdown);
}

.theme-switcher-menu .theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.88rem;
  border: 1px solid transparent;
  margin-bottom: 4px;
}

.theme-switcher-menu .theme-option:hover {
  background-color: var(--brand-primary-light);
  border-color: var(--brand-primary-soft);
}

.theme-switcher-menu .theme-option.active {
  background-color: var(--brand-primary-light);
  border-color: var(--brand-primary);
  font-weight: 600;
}

.theme-option .theme-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: var(--shadow-light);
  flex-shrink: 0;
}

.theme-option .theme-name {
  flex: 1;
  font-weight: 500;
}

.theme-option .theme-check {
  color: var(--brand-primary);
  font-size: 1.1rem;
  display: none;
}

.theme-option.active .theme-check {
  display: inline;
}

.theme-option .theme-tags {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.theme-option .theme-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.theme-switcher-menu .dropdown-header {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  padding: 8px 12px;
}

/* ================================================================
   11. 页面通用组件 — 首页 / 列表页 / 详情页 / 过渡页 / 结果页
   ================================================================ */

/* ── 页面标题区 ── */
.page-header {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}
.page-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.page-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 0;
}

/* ── 统计卡片标准组件 ── */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}
.stat-card {
  border: none;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  background: var(--bg-card);
  padding: var(--spacing-md);
  border-left: 4px solid var(--stat-accent-border);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.stat-card .stat-value {
  font-size: 2rem;
  font-weight: bold;
  color: var(--stat-value-color);
  margin-bottom: 0.25rem;
}
.stat-card .stat-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 0;
}
.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--brand-gradient);
  font-size: 1.1rem;
}

/* ── 图表卡片 ── */
.chart-card {
  border: none;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  background: var(--bg-card);
  padding: var(--spacing-md);
  transition: box-shadow var(--transition-base);
}
.chart-card:hover {
  box-shadow: var(--shadow-card-hover);
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}
.chart-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0;
}

/* ── 列表页 — 筛选区 ── */
.filter-bar {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-light);
  border: 1px solid var(--border-color);
}
.filter-bar .form-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* ── 列表页 — 表格区域 ── */
.table-container {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  border: 1px solid var(--border-color);
}
.table-container .table {
  margin-bottom: 0;
}
.table-container .table thead th {
  background: var(--bg-hover);
  border-bottom: 2px solid var(--border-color);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.875rem;
}
.table-container .table tbody td {
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.table-container .table tbody tr:hover {
  background: var(--brand-primary-light);
}

/* ── 详情页 — 信息面板 ── */
.info-panel {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-color);
}
.info-panel .info-header {
  background: var(--card-header-gradient);
  color: var(--card-header-color);
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.info-panel .info-body {
  padding: var(--spacing-lg);
}
.info-row {
  display: flex;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-light);
}
.info-row:last-child { border-bottom: none; }
.info-label {
  width: 120px;
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.info-value {
  flex: 1;
  color: var(--text-primary);
  font-size: 0.875rem;
}

/* ── 过渡页 — 加载/空状态/占位 ── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}
.empty-state .empty-icon {
  font-size: 3rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-md);
}
.empty-state .empty-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}
.loading-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}
.loading-state .spinner-border {
  color: var(--brand-primary);
}

/* ── 结果页 — 成功/错误状态 ── */
.result-page {
  text-align: center;
  padding: 80px 20px;
}
.result-page .result-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-lg);
}
.result-page .result-icon.success { color: var(--color-success); }
.result-page .result-icon.error { color: var(--color-danger); }
.result-page .result-icon.warning { color: var(--color-warning); }
.result-page .result-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}
.result-page .result-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ── 页面标题操作栏 ── */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}
.action-bar-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.action-bar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* ── 数据概览行 ── */
.overview-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}
@media (max-width: 992px) {
  .overview-row {
    grid-template-columns: 1fr;
  }
}

/* ── 待办/任务列表卡片 ── */
.task-list-card {
  border: none;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: hidden;
}
.task-list-card .task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition-fast);
}
.task-list-card .task-item:last-child { border-bottom: none; }
.task-list-card .task-item:hover {
  background: var(--brand-primary-light);
}
.task-list-card .task-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  background: var(--brand-gradient);
}

/* ── 响应式调整 ── */
@media (max-width: 768px) {
  .stat-cards {
    grid-template-columns: 1fr;
  }
  .info-row {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  .info-label {
    width: auto;
  }
  .action-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ================================================================
   10. 表单组件增强（SaaS UI 设计规范）
   ================================================================ */

/* ── 复选框/单选框增强 ── */
.merchant-layout .form-check {
  padding-left: 1.75rem;
  margin-bottom: 0.5rem;
}
.merchant-layout .form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 0.15em;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 2px solid var(--border-color);
}
.merchant-layout .form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--brand-primary-light);
}
.merchant-layout .form-check-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--brand-primary-light);
}
.merchant-layout .form-check-input:hover {
  border-color: var(--brand-primary);
}
.merchant-layout .form-check-label {
  cursor: pointer;
  color: var(--text-primary);
  transition: color var(--transition-fast);
  user-select: none;
}
.merchant-layout .form-check:hover .form-check-label {
  color: var(--brand-primary);
}

/* ── 开关 Switch 增强 ── */
.merchant-layout .form-switch .form-check-input {
  width: 44px;
  height: 22px;
  margin-top: 0.1em;
  cursor: pointer;
  transition: all var(--transition-base);
  border: 2px solid var(--border-color);
}
.merchant-layout .form-switch .form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--brand-primary-light);
}
.merchant-layout .form-switch .form-check-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--brand-primary-light);
}
.merchant-layout .form-switch .form-check-input:hover {
  border-color: var(--brand-primary);
}

/* ── 输入框/下拉框增强 ── */
.merchant-layout .form-control,
.merchant-layout .form-select {
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  color: var(--text-primary);
}
.merchant-layout .form-control:focus,
.merchant-layout .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--brand-primary-light);
}
.merchant-layout .form-control:hover,
.merchant-layout .form-select:hover {
  border-color: var(--brand-primary);
}
.merchant-layout .form-label {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}
.merchant-layout .form-text {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* ── 按钮 Outline 风格增强 ── */
.merchant-layout .btn-outline-primary {
  border: 1.5px solid var(--brand-primary);
  color: var(--brand-primary);
  transition: all var(--transition-fast);
  border-radius: var(--radius-md);
}
.merchant-layout .btn-outline-primary:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}
.merchant-layout .btn-outline-primary:focus {
  box-shadow: 0 0 0 4px var(--brand-primary-light);
}
.merchant-layout .btn-outline-success {
  border: 1.5px solid var(--color-success);
  color: var(--color-success);
  transition: all var(--transition-fast);
  border-radius: var(--radius-md);
}
.merchant-layout .btn-outline-success:hover {
  background: var(--color-success);
  border-color: var(--color-success);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}
.merchant-layout .btn-outline-danger {
  border: 1.5px solid var(--color-danger);
  color: var(--color-danger);
  transition: all var(--transition-fast);
  border-radius: var(--radius-md);
}
.merchant-layout .btn-outline-danger:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}
.merchant-layout .btn-outline-warning {
  border: 1.5px solid var(--color-warning);
  color: var(--color-warning);
  transition: all var(--transition-fast);
  border-radius: var(--radius-md);
}
.merchant-layout .btn-outline-warning:hover {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}
.merchant-layout .btn-outline-info {
  border: 1.5px solid var(--color-info);
  color: var(--color-info);
  transition: all var(--transition-fast);
  border-radius: var(--radius-md);
}
.merchant-layout .btn-outline-info:hover {
  background: var(--color-info);
  border-color: var(--color-info);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}
.merchant-layout .btn-outline-secondary {
  border: 1.5px solid var(--border-color);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  border-radius: var(--radius-md);
}
.merchant-layout .btn-outline-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--text-secondary);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}

/* ── 徽章/状态标签增强 ── */
.merchant-layout .badge {
  padding: 4px 10px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.merchant-layout .badge.bg-success {
  background: var(--color-success) !important;
}
.merchant-layout .badge.bg-warning {
  background: var(--color-warning) !important;
  color: #fff;
}
.merchant-layout .badge.bg-danger {
  background: var(--color-danger) !important;
}
.merchant-layout .badge.bg-info {
  background: var(--color-info) !important;
}
.merchant-layout .badge.bg-primary {
  background: var(--brand-primary) !important;
}
.merchant-layout .badge.bg-secondary {
  background: var(--text-muted) !important;
}

/* ── 卡片增强 ── */
.merchant-layout .card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  background: var(--bg-card);
}
.merchant-layout .card-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  padding: 14px 20px;
}
.merchant-layout .card-body {
  padding: 20px;
}

/* ── 表格增强 ── */
.merchant-layout .table {
  color: var(--text-primary);
}
.merchant-layout .table th {
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-bottom: 2px solid var(--border-color);
  border-top: none;
  padding: 12px 14px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.merchant-layout .table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.merchant-layout .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(245, 247, 250, 0.5);
}
.merchant-layout .table-hover tbody tr:hover {
  background: var(--brand-primary-light);
}

/* ── 分页增强 ── */
.merchant-layout .page-link {
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  border-radius: var(--radius-sm);
  margin: 0 2px;
}
.merchant-layout .page-item.active .page-link {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.merchant-layout .page-link:hover {
  background: var(--brand-primary-light);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.merchant-layout .page-item.disabled .page-link {
  color: var(--text-muted);
  opacity: 0.6;
}

/* ── 可选择卡片（用于选项卡式复选框） ── */
.selectable-card {
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--bg-card);
  position: relative;
}
.selectable-card:hover {
  border-color: var(--brand-primary);
  background: var(--brand-primary-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}
.selectable-card.checked {
  border-color: var(--brand-primary);
  background: var(--brand-primary-light);
  box-shadow: var(--shadow-card);
}
.selectable-card.checked .form-check-label {
  color: var(--brand-primary);
  font-weight: 600;
}
.selectable-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  display: none;
  background: var(--brand-gradient);
  color: #fff;
  font-weight: 500;
}
.selectable-card.checked .selectable-card-badge {
  display: inline-block;
}

/* ================================================================
   13. 操作指南Banner（列表页顶部引导横幅）
   ================================================================ */
.guide-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--brand-primary-light);
  border: 1px solid var(--brand-primary-soft);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
  gap: 20px;
  transition: all var(--transition-fast);
}
.guide-banner:hover {
  background: var(--brand-primary-soft);
  box-shadow: var(--shadow-light);
}
.guide-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}
.guide-banner-icon {
  width: 44px;
  height: 44px;
  background: var(--brand-gradient);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
}
.guide-banner-text strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-primary);
  margin-bottom: 2px;
}
.guide-banner-text p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.guide-banner-btn {
  display: inline-flex;
  align-items: center;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.guide-banner-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
  color: #fff;
}

@media (max-width: 768px) {
  .guide-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
  }
  .guide-banner-text p {
    font-size: 12px;
  }
}