/* ============================================================
   Vastrade 双皮肤系统 v1.0（第 118 轮）
   皮肤切换：html[data-skin="nithen"] / html[data-skin="hd"]
   原理：重定义 vastrade-ui-tokens.css 的原色阶（--vt-green-* /
   --vt-teal-* / --vt-gray-* / 功能色）与 Element Plus 变量，
   让侧栏 / 顶栏 / 登录页 / 按钮 / 链接 / ICON 全部自动跟随。
   默认（无 data-skin）= Vastrade 经典绿，不受本文件影响。
   ============================================================ */

/* ============================================================
   皮肤一 · Nithen 克莱因蓝（来源 nithen-brand-showcase）
   主色 #1F6BF2 · 深蓝 #0A3A9E · 浅底 #F4F6FA · 浅蓝底 #E8F0FE
   ============================================================ */
[data-skin="nithen"] {
  /* 主色阶（原绿色 ramp → 克莱因蓝 ramp） */
  --vt-green-50:  #EEF4FF;
  --vt-green-100: #E8F0FE;
  --vt-green-200: #B7D2FF;
  --vt-green-300: #7FB2FF;
  --vt-green-400: #4D93FF;
  --vt-green-500: #1F6BF2;  /* 品牌亮蓝：装饰 / 选中 / 图表强调 */
  --vt-green-600: #0E4FCC;  /* 交互蓝：按钮 / 链接底色（白字可读） */
  --vt-green-700: #0A3A9E;  /* 深蓝：浅底上的蓝色正文文字 */
  --vt-green-800: #082F80;
  --vt-green-900: #16264A;

  /* 侧栏色阶（原深青 ramp → 深海军蓝 ramp） */
  --vt-teal-50:  #EEF4FF;
  --vt-teal-100: #C9DAF8;
  --vt-teal-200: #9DBCEC;
  --vt-teal-300: #6E9BDD;
  --vt-teal-400: #3D6FC4;
  --vt-teal-500: #1657DC;
  --vt-teal-600: #0A3A9E;  /* 侧栏 / 顶栏 / 页头 */
  --vt-teal-700: #082F80;
  --vt-teal-800: #062463;
  --vt-teal-900: #041744;

  /* 中性色阶 → 冷调蓝灰 */
  --vt-gray-50:  #F4F6FA;
  --vt-gray-100: #EEF2F8;
  --vt-gray-200: #E3E7EC;
  --vt-gray-300: #DDE2EA;
  --vt-gray-400: #A3AAB6;
  --vt-gray-500: #8A919C;
  --vt-gray-600: #5C6470;
  --vt-gray-700: #414956;
  --vt-gray-800: #262B33;
  --vt-gray-900: #17191C;
  --vt-gray-950: #0F1216;

  /* 功能色（对齐 Nithen UI） */
  --vt-success-500: #34C77B;
  --vt-success-700: #1E9B5C;
  --vt-warning-500: #FF9F1C;
  --vt-warning-700: #C77700;
  --vt-danger-500:  #F0453F;
  --vt-danger-600:  #D9332E;
  --vt-danger-700:  #B72621;
  --vt-info-500:    #4D93FF;

  --vt-shadow-card: 0 4px 18px rgba(14, 79, 204, 0.08);

  /* Element Plus 主色阶 */
  --el-color-primary: #0E4FCC;
  --el-color-primary-light-3: #4D93FF;
  --el-color-primary-light-5: #8AB6FF;
  --el-color-primary-light-7: #BFD7FF;
  --el-color-primary-light-8: #D8E6FF;
  --el-color-primary-light-9: #E8F0FE;
  --el-color-primary-dark-2: #0A3A9E;
  --el-color-success: #34C77B;
  --el-color-success-light-9: #E9F9F0;
  --el-color-warning: #FF9F1C;
  --el-color-warning-light-9: #FFF3E5;
  --el-color-danger:  #F0453F;
  --el-color-error:   #F0453F;
  --el-color-danger-light-9: #FDECEC;
  --el-color-info:    #8A919C;
  --el-color-info-light-9: #F0F2F5;
  --el-text-color-primary:   #17191C;
  --el-text-color-regular:   #5C6470;
  --el-text-color-secondary: #8A919C;
  --el-text-color-placeholder: #A3AAB6;
  --el-border-color:        #E3E7EC;
  --el-border-color-light:  #E3E7EC;
  --el-border-color-lighter:#EEF2F8;
  --el-fill-color:       #F4F6FA;
  --el-fill-color-light: #EEF2F8;
  --el-fill-color-lighter:#F4F6FA;
  --el-bg-color-page: #F4F6FA;
}

/* Nithen 皮肤 · 硬编码绿色元素的定点覆盖 */
[data-skin="nithen"] ::selection { background: var(--vt-green-100); color: var(--vt-green-900); }
[data-skin="nithen"] .login-page {
  background: radial-gradient(1100px 620px at 12% 0%, #1657DC 0%, #0A3A9E 45%, #062463 100%);
}
[data-skin="nithen"] .login-brand {
  background: linear-gradient(160deg, #0E4FCC 0%, #1657DC 55%, #4D93FF 100%);
}
[data-skin="nithen"] .login-brand::after {
  background: linear-gradient(180deg, #4D93FF, #0A3A9E);
}
[data-skin="nithen"] .calc-fs-head {
  background: linear-gradient(135deg, #0A3A9E 0%, #0E4FCC 60%, #4D93FF 100%);
}
[data-skin="nithen"] .qr-head b, [data-skin="nithen"] .qr-edit-t { color: #0A3A9E; }
/* 车型库橱窗 / 品牌 LOGO 管理 / 照片分类（app.css 硬编码绿） */
[data-skin="nithen"] .v-chip:hover { color: #0E4FCC; background: #EEF4FF; }
[data-skin="nithen"] .v-chip.active { color: #0A3A9E; background: #E8F0FE; border-color: #7FB2FF; }
[data-skin="nithen"] .v-card:hover { box-shadow: 0 6px 18px rgba(14,79,204,.14); }
[data-skin="nithen"] .v-photo-tab:hover { color: #0E4FCC; border-color: #7FB2FF; }
[data-skin="nithen"] .v-photo-tab.active { background: #0E4FCC; border-color: #0E4FCC; }
[data-skin="nithen"] .v-detail-price, [data-skin="nithen"] .v-price { color: #F0453F; }
[data-skin="nithen"] .bl-letter:hover { background: #EEF4FF; color: #0E4FCC; }
[data-skin="nithen"] .bl-letter.active { background: #E8F0FE; border-color: #7FB2FF; color: #0A3A9E; }
[data-skin="nithen"] .bl-item:hover { border-color: #9DBCEC; box-shadow: 0 2px 8px rgba(14,79,204,.08); }
[data-skin="nithen"] .cmp-group td { color: #0A3A9E; }
[data-skin="nithen"] .cmp-opt-msrp { color: #0E4FCC; }
[data-skin="nithen"] .ph-sec-title { border-left-color: #1657DC; }
[data-skin="nithen"] .ph-sec-title b { color: #0A3A9E; }
[data-skin="nithen"] .ph-item.ph-drag-over,
[data-skin="nithen"] .ph-item.ph-selected { outline-color: #1657DC; }
[data-skin="nithen"] .ph-check input { accent-color: #1657DC; }
[data-skin="nithen"] .lg-hero-PROCESS::before { background: #1F6BF2; }
[data-skin="nithen"] .lg-node-land { background: #1F6BF2; box-shadow: 0 0 0 3px rgba(31,107,242,.18); }
[data-skin="nithen"] .lg-node-sea { background: #0E4FCC; box-shadow: 0 0 0 3px rgba(14,79,204,.18); }
[data-skin="nithen"] .lg-dot.on { background: #1F6BF2; box-shadow: 0 0 0 3px rgba(31,107,242,.2); }
[data-skin="nithen"] .tool-card:hover { border-color: #4D93FF; }

/* Nithen 皮肤 · 暗色模式（背景保持深色，主色换蓝） */
[data-theme="dark"][data-skin="nithen"] {
  --vt-bg-page:    #0F1216;
  --vt-bg-card:    #1A1F27;
  --vt-bg-sidebar: #062463;
  --vt-bg-sidebar-active: #0A3A9E;
  --vt-bg-hover:   #202631;
  --vt-bg-selected:#12234A;
  --vt-text-1: #E9EDF4;
  --vt-text-2: #A3AAB6;
  --vt-text-3: #6B7382;
  --vt-text-link: #7FB2FF;
  --vt-border:        #262D38;
  --vt-border-strong: #333B49;
  --vt-primary-deep: #7FB2FF;
  --el-color-primary: #4D93FF;
  --el-color-primary-light-3: #7FB2FF;
  --el-color-primary-light-5: #9DC4FF;
  --el-color-primary-light-7: #C0D8FF;
  --el-color-primary-light-8: #D3E4FF;
  --el-color-primary-light-9: #12234A;
  --el-color-primary-dark-2: #1F6BF2;
  --el-text-color-primary: #E9EDF4;
  --el-text-color-regular: #A3AAB6;
  --el-border-color: #262D38;
  --el-border-color-light: #262D38;
  --el-border-color-lighter: #202631;
  --el-fill-color: #1A1F27;
  --el-fill-color-light: #202631;
  --el-fill-color-lighter: #1A1F27;
  --el-bg-color: #1A1F27;
  --el-bg-color-page: #0F1216;
  --el-bg-color-overlay: #202631;
}
[data-theme="dark"][data-skin="nithen"] .sidebar { background: linear-gradient(180deg, #062463 0%, #041744 100%); }
[data-theme="dark"][data-skin="nithen"] .topbar { background: #062463; }
[data-theme="dark"][data-skin="nithen"] .login-page {
  background: radial-gradient(1100px 620px at 12% 0%, #0A3A9E 0%, #062463 50%, #0F1216 100%);
}

/* ============================================================
   皮肤二 · HD 国际风 · 海军蓝 + 青色（来源 HD-International-Design-System）
   深海军蓝 #0A2F5C · 青色 #16C2BE · 浅底 #F4F8FA · 墨青文字 #12263A
   ============================================================ */
[data-skin="hd"] {
  /* 主色阶（原绿色 ramp → 青色 ramp；交互色用海洋蓝保证白字对比） */
  --vt-green-50:  #EAF8F8;
  --vt-green-100: #E0F5F4;
  --vt-green-200: #B4EAE8;
  --vt-green-300: #2DD9C8;  /* 亮青：暗底上的青色文字 */
  --vt-green-400: #16C2BE;  /* 品牌亮青：装饰 / 选中 / 图表强调 */
  --vt-green-500: #16C2BE;
  --vt-green-600: #0E5E8A;  /* 交互蓝：按钮 / 链接底色（白字可读） */
  --vt-green-700: #0B4E74;  /* 深蓝：浅底上的蓝色正文文字 */
  --vt-green-800: #093F5E;
  --vt-green-900: #12263A;

  /* 侧栏色阶（原深青 ramp → 深海军蓝 ramp） */
  --vt-teal-50:  #EEF5FB;
  --vt-teal-100: #C9D8EA;
  --vt-teal-200: #9FB8D4;
  --vt-teal-300: #6E93BC;
  --vt-teal-400: #3D679B;
  --vt-teal-500: #0E5E8A;
  --vt-teal-600: #0A2F5C;  /* 侧栏 / 顶栏 / 页头 */
  --vt-teal-700: #071F3E;
  --vt-teal-800: #051730;
  --vt-teal-900: #030F20;

  /* 中性色阶 → 青调冷灰 */
  --vt-gray-50:  #F4F8FA;
  --vt-gray-100: #EDF2F6;
  --vt-gray-200: #DCE6EE;
  --vt-gray-300: #CFDBE5;
  --vt-gray-400: #8CA0B3;
  --vt-gray-500: #6E8299;
  --vt-gray-600: #5A6B7E;
  --vt-gray-700: #42546A;
  --vt-gray-800: #293B52;
  --vt-gray-900: #12263A;
  --vt-gray-950: #071F3E;

  /* 功能色（对齐 HD UI） */
  --vt-success-500: #16A34A;
  --vt-success-700: #15803D;
  --vt-warning-500: #F59E0B;
  --vt-warning-700: #B45309;
  --vt-danger-500:  #E11D48;
  --vt-danger-600:  #C8103C;
  --vt-danger-700:  #BE123C;
  --vt-info-500:    #0E5E8A;

  --vt-shadow-card: 0 4px 18px rgba(10, 47, 92, 0.10);

  /* Element Plus 主色阶 */
  --el-color-primary: #0E5E8A;
  --el-color-primary-light-3: #3D87A8;
  --el-color-primary-light-5: #6FA9C2;
  --el-color-primary-light-7: #A5CCDD;
  --el-color-primary-light-8: #C0DCE8;
  --el-color-primary-light-9: #EAF5F5;
  --el-color-primary-dark-2: #0B4E74;
  --el-color-success: #16A34A;
  --el-color-success-light-9: #E9F7EE;
  --el-color-warning: #F59E0B;
  --el-color-warning-light-9: #FEF4E2;
  --el-color-danger:  #E11D48;
  --el-color-error:   #E11D48;
  --el-color-danger-light-9: #FCE8ED;
  --el-color-info:    #6E8299;
  --el-color-info-light-9: #EFF3F6;
  --el-text-color-primary:   #12263A;
  --el-text-color-regular:   #5A6B7E;
  --el-text-color-secondary: #8CA0B3;
  --el-text-color-placeholder: #8CA0B3;
  --el-border-color:        #DCE6EE;
  --el-border-color-light:  #DCE6EE;
  --el-border-color-lighter:#EDF2F6;
  --el-fill-color:       #F4F8FA;
  --el-fill-color-light: #EDF2F6;
  --el-fill-color-lighter:#F4F8FA;
  --el-bg-color-page: #F4F8FA;
}

/* HD 皮肤 · 硬编码绿色元素的定点覆盖 */
[data-skin="hd"] ::selection { background: var(--vt-green-100); color: var(--vt-green-900); }
[data-skin="hd"] .login-page {
  background: radial-gradient(1100px 620px at 12% 0%, #0E5E8A 0%, #0A2F5C 45%, #071F3E 100%);
}
[data-skin="hd"] .login-brand {
  background: linear-gradient(160deg, #0A2F5C 0%, #0E5E8A 55%, #16C2BE 130%);
}
[data-skin="hd"] .login-brand::after {
  background: linear-gradient(180deg, #2DD9C8, #0E5E8A);
}
[data-skin="hd"] .calc-fs-head {
  background: linear-gradient(135deg, #071F3E 0%, #0A2F5C 60%, #0E5E8A 100%);
}
[data-skin="hd"] .qr-head b, [data-skin="hd"] .qr-edit-t { color: #0B4E74; }
[data-skin="hd"] .v-chip:hover { color: #0B4E74; background: #EAF8F8; }
[data-skin="hd"] .v-chip.active { color: #0B4E74; background: #E0F5F4; border-color: #2DD9C8; }
[data-skin="hd"] .v-card:hover { box-shadow: 0 6px 18px rgba(10,47,92,.16); }
[data-skin="hd"] .v-photo-tab:hover { color: #0B4E74; border-color: #2DD9C8; }
[data-skin="hd"] .v-photo-tab.active { background: #0E5E8A; border-color: #0E5E8A; }
[data-skin="hd"] .v-detail-price, [data-skin="hd"] .v-price { color: #E11D48; }
[data-skin="hd"] .bl-letter:hover { background: #EAF8F8; color: #0E5E8A; }
[data-skin="hd"] .bl-letter.active { background: #E0F5F4; border-color: #2DD9C8; color: #0B4E74; }
[data-skin="hd"] .bl-item:hover { border-color: #9FB8D4; box-shadow: 0 2px 8px rgba(10,47,92,.10); }
[data-skin="hd"] .cmp-group td { color: #0B4E74; }
[data-skin="hd"] .cmp-opt-msrp { color: #0E5E8A; }
[data-skin="hd"] .ph-sec-title { border-left-color: #16C2BE; }
[data-skin="hd"] .ph-sec-title b { color: #0B4E74; }
[data-skin="hd"] .ph-item.ph-drag-over,
[data-skin="hd"] .ph-item.ph-selected { outline-color: #16C2BE; }
[data-skin="hd"] .ph-check input { accent-color: #16C2BE; }
[data-skin="hd"] .lg-hero-PROCESS::before { background: #16C2BE; }
[data-skin="hd"] .lg-node-land { background: #16C2BE; box-shadow: 0 0 0 3px rgba(22,194,190,.18); }
[data-skin="hd"] .lg-node-sea { background: #0E5E8A; box-shadow: 0 0 0 3px rgba(14,94,138,.18); }
[data-skin="hd"] .lg-dot.on { background: #16C2BE; box-shadow: 0 0 0 3px rgba(22,194,190,.2); }
[data-skin="hd"] .tool-card:hover { border-color: #2DD9C8; }

/* HD 皮肤 · 暗色模式 */
[data-theme="dark"][data-skin="hd"] {
  --vt-bg-page:    #071F3E;
  --vt-bg-card:    #0C2A4C;
  --vt-bg-sidebar: #051730;
  --vt-bg-sidebar-active: #0A2F5C;
  --vt-bg-hover:   #123356;
  --vt-bg-selected:#0C3A44;
  --vt-text-1: #E9F0F7;
  --vt-text-2: #8CA0B3;
  --vt-text-3: #5A6B7E;
  --vt-text-link: #2DD9C8;
  --vt-border:        #16345A;
  --vt-border-strong: #204470;
  --vt-primary-deep: #2DD9C8;
  --el-color-primary: #16C2BE;
  --el-color-primary-light-3: #2DD9C8;
  --el-color-primary-light-5: #5FE3DB;
  --el-color-primary-light-7: #93EDE7;
  --el-color-primary-light-8: #B2F2EE;
  --el-color-primary-light-9: #0C3A44;
  --el-color-primary-dark-2: #16C2BE;
  --el-text-color-primary: #E9F0F7;
  --el-text-color-regular: #8CA0B3;
  --el-border-color: #16345A;
  --el-border-color-light: #16345A;
  --el-border-color-lighter: #123356;
  --el-fill-color: #0C2A4C;
  --el-fill-color-light: #123356;
  --el-fill-color-lighter: #0C2A4C;
  --el-bg-color: #0C2A4C;
  --el-bg-color-page: #071F3E;
  --el-bg-color-overlay: #123356;
}
[data-theme="dark"][data-skin="hd"] .sidebar { background: linear-gradient(180deg, #051730 0%, #030F20 100%); }
[data-theme="dark"][data-skin="hd"] .topbar { background: #051730; }
[data-theme="dark"][data-skin="hd"] .login-page {
  background: radial-gradient(1100px 620px at 12% 0%, #0A2F5C 0%, #071F3E 50%, #030F20 100%);
}

/* ============================================================
   图表 / 统计卡 / 趋势线配色：跟随皮肤，避免绿系图标出现在蓝色皮肤上
   ============================================================ */
html[data-skin="nithen"] {
  --chart-1: #1F6BF2;
  --chart-2: #0A3A9E;
  --chart-3: #4D93FF;
  --chart-4: #F0453F;
  --chart-5: #1657DC;
  --chart-6: #6E9BDD;
  --chart-7: #FF9F1C;
  --chart-8: #7FB2FF;
}
html[data-skin="hd"] {
  --chart-1: #0E5E8A;
  --chart-2: #0A2F5C;
  --chart-3: #16C2BE;
  --chart-4: #E11D48;
  --chart-5: #3D679B;
  --chart-6: #0E5E8A;
  --chart-7: #F59E0B;
  --chart-8: #6E93BC;
}

/* ============================================================
   对比度微调（深色侧栏上的强调条 / 状态点）：避免深色皮肤上
   品牌亮色与侧栏底色过近，导致选中提示看不清
   ============================================================ */
[data-skin="nithen"] .nav-item.active { border-left-color: #4D93FF; }
[data-skin="nithen"] .sidebar-foot .dot { background: #4D93FF; }
[data-skin="hd"] .nav-item.active { border-left-color: #2DD9C8; }
[data-skin="hd"] .sidebar-foot .dot { background: #2DD9C8; }

/* ============================================================
   内联品牌色重映射（品牌与外观收尾）：视图模板里存在硬编码的
   绿色/青色内联样式（统计卡边条 / 小标题 / 数值强调 / 交付计划），
   按皮肤定点映射到对应主色，仅匹配 style 属性前缀。
   语义色不映射：在线状态绿已改用 #16A34A（不在映射表内）。
   ============================================================ */

/* ---- Nithen 克莱因蓝 ---- */
[data-skin="nithen"] [style*="color:#17954D"] { color: #0A3A9E !important; }
[data-skin="nithen"] [style*="color:#128C7E"] { color: #1657DC !important; }
[data-skin="nithen"] [style*="color:#1CB454"] { color: #1F6BF2 !important; }
[data-skin="nithen"] [style*="color:#075E54"] { color: #082F80 !important; }
[data-skin="nithen"] [style*="color:#2C9C8C"] { color: #3D82F6 !important; }
[data-skin="nithen"] [style*="color:#25D366"] { color: #4D93FF !important; }
[data-skin="nithen"] [style*="border-left-color:#17954D"] { border-left-color: #0A3A9E !important; }
[data-skin="nithen"] [style*="border-left-color:#128C7E"] { border-left-color: #1657DC !important; }
[data-skin="nithen"] [style*="--el-switch-on-color:#1CB454"] { --el-switch-on-color: #1F6BF2 !important; }
[data-skin="nithen"] [style*="background:#EFF4F1"] { background: #EEF2F8 !important; }
[data-skin="nithen"] [style*="background:#E7F9EE"] { background: #E8F0FE !important; }
[data-skin="nithen"] [style*="background:#EAF2ED"] { background: #E8EEF9 !important; }

/* ---- HD 深海蓝绿 ---- */
[data-skin="hd"] [style*="color:#17954D"] { color: #0B4E74 !important; }
[data-skin="hd"] [style*="color:#128C7E"] { color: #0E5E8A !important; }
[data-skin="hd"] [style*="color:#1CB454"] { color: #1787B8 !important; }
[data-skin="hd"] [style*="color:#075E54"] { color: #0A2F5C !important; }
[data-skin="hd"] [style*="color:#2C9C8C"] { color: #16C2BE !important; }
[data-skin="hd"] [style*="color:#25D366"] { color: #2DD9C8 !important; }
[data-skin="hd"] [style*="border-left-color:#17954D"] { border-left-color: #0B4E74 !important; }
[data-skin="hd"] [style*="border-left-color:#128C7E"] { border-left-color: #0E5E8A !important; }
[data-skin="hd"] [style*="--el-switch-on-color:#1CB454"] { --el-switch-on-color: #1787B8 !important; }
[data-skin="hd"] [style*="background:#EFF4F1"] { background: #EDF2F6 !important; }
[data-skin="hd"] [style*="background:#E7F9EE"] { background: #E4F3F6 !important; }
[data-skin="hd"] [style*="background:#EAF2ED"] { background: #E5EFF3 !important; }