/* ============================================================
 * RY888 三端统一设计系统 · 批B：商家工作台收口层
 * 文件：merchant-overlay.css（独立部署，新文件名破 immutable）
 * 作用域：body.role-merchant（theme-cockpit 深 / theme-alu 浅 双主题）
 * 原则：纯令牌级改造——色板/圆角/密度/边框/字重/组件表面；
 *       布局骨架零触碰（禁结构性容器 height/width/overflow/margin/padding；
 *       height 仅用于表格密度令牌，批 A 同法）
 * 口径：主按钮蓝（深 #4a7dff / 浅 #2f6bff）；交互选中态一律蓝系；
 *       红 #e32119 系仅点缀；圆角 8px 令牌；胶囊 tag 统一浅底体系；
 *       密度表头 40 / 行 44；状态色深浅各一套（同批 A）
 * 商家身份绿 #22c55e 仅保留：余额仪表盘（tg-fill/tg-num）+ 主题预览条
 *       （theme-dot 硬编码）+ success 语义点（--pf-green 系状态色）
 * 对抗层：index.scss 商家绿块（含 !important 钉死层）、pk-theme 全局层
 *       ——本文件在 index.html 最末加载 + 双 role 类 + #app 前缀压制
 * ============================================================ */

/* ---- 1. 令牌层 · 深色 cockpit ---- */
body.role-merchant.role-merchant.theme-cockpit {
  /* 主色：蓝（绿退出交互主色） */
  --el-color-primary: #4a7dff !important;
  --el-color-primary-light-3: #6e95ff !important;
  --el-color-primary-light-5: #92b0ff !important;
  --el-color-primary-light-7: #b7caff !important;
  --el-color-primary-light-8: #cbd9ff !important;
  --el-color-primary-light-9: rgba(74, 125, 255, .16) !important;
  --el-color-primary-dark-2: #3b64cc !important;
  /* 状态色（深色一套，同批 A） */
  --el-color-success: #34c77b !important;
  --el-color-success-light-3: #59d291 !important;
  --el-color-warning: #f5b344 !important;
  --el-color-warning-light-3: #f7c26d !important;
  --el-color-danger: #ff5a4e !important;
  --el-color-danger-light-3: #ff7b70 !important;
  --el-color-error: #ff5a4e !important;
  --el-color-info: #8a919e !important;
  /* 圆角 8px 令牌 */
  --el-border-radius-base: 8px !important;
  --el-border-radius-small: 8px !important;
  --el-border-radius-round: 8px !important;
  /* 表格变量收口（深色表面） */
  --el-table-border-color: rgba(255, 255, 255, .08) !important;
  --el-table-header-bg-color: #1b1e24 !important;
  --el-table-header-text-color: #b3aca0 !important;
  --el-table-text-color: #f2ede6 !important;
  --el-table-bg-color: #181a1f !important;
  --el-table-tr-bg-color: #181a1f !important;
  --el-table-row-hover-bg-color: rgba(255, 255, 255, .05) !important;
  /* 商家身份变量收口：accent 绿→蓝 */
  --pf-accent: #4a7dff !important;
  --pf-accent-deep: #3b64cc !important;
  --pf-btn-primary: linear-gradient(135deg, #6e95ff, #4a7dff) !important;
  --pf-btn-glow: 0 4px 16px rgba(74, 125, 255, .38) !important;
  --pf-selected-bg: rgba(74, 125, 255, .18) !important;
  --pf-code: #6e95ff !important;
  --pf-code-glow: 0 0 12px rgba(74, 125, 255, .35) !important;
  --pf-nav-active: #4a7dff !important;
  --pf-nav-active-text: #ffffff !important;
  --pf-table-head: #1b1e24 !important;
}

/* ---- 2. 令牌层 · 浅色 alu ---- */
body.role-merchant.role-merchant.theme-alu {
  /* 主色：蓝 */
  --el-color-primary: #2f6bff !important;
  --el-color-primary-light-3: #5d8bff !important;
  --el-color-primary-light-5: #8cabff !important;
  --el-color-primary-light-7: #b6c9ff !important;
  --el-color-primary-light-8: #cddbff !important;
  --el-color-primary-light-9: #eaf1ff !important;
  --el-color-primary-dark-2: #2656cc !important;
  /* 状态色（浅色一套，同批 A） */
  --el-color-success: #16a34a !important;
  --el-color-success-light-3: #45b86d !important;
  --el-color-warning: #d97706 !important;
  --el-color-warning-light-3: #e19128 !important;
  --el-color-danger: #d7190f !important;
  --el-color-danger-light-3: #df463c !important;
  --el-color-error: #d7190f !important;
  --el-color-info: #8a919e !important;
  /* 圆角 8px 令牌 */
  --el-border-radius-base: 8px !important;
  --el-border-radius-small: 8px !important;
  --el-border-radius-round: 8px !important;
  /* 表格变量收口（浅色表面） */
  --el-table-border-color: #e8eaee !important;
  --el-table-header-bg-color: #faf9f7 !important;
  --el-table-header-text-color: #6b7280 !important;
  /* 商家身份变量收口：accent 绿→蓝 */
  --pf-accent: #2f6bff !important;
  --pf-accent-deep: #2656cc !important;
  --pf-btn-primary: linear-gradient(135deg, #5d8bff, #2f6bff) !important;
  --pf-btn-glow: 0 4px 12px rgba(47, 107, 255, .22) !important;
  --pf-selected-bg: #eaf1ff !important;
  --pf-code: #2f6bff !important;
  --pf-code-glow: none !important;
  --pf-nav-active: #2f6bff !important;
  --pf-nav-active-text: #ffffff !important;
  --pf-table-head: #faf9f7 !important;
}

/* ---- 3. el-* 组件表面（页面内，#app 前缀压制 pk-theme / index.scss 钉死层） ---- */

/* 按钮圆角 8px */
body.role-merchant.role-merchant #app .el-button {
  border-radius: 8px !important;
}
/* 主按钮蓝：压制 index.scss 商家块 .mportal-root .el-button--primary 的 #16a34a !important 钉死层
   （本选择器 = 双 role 类 + #app id 级，特异性稳压钉死层） */
body.role-merchant.role-merchant #app .el-button.el-button--primary {
  --el-button-bg-color: var(--el-color-primary) !important;
  --el-button-border-color: var(--el-color-primary) !important;
  --el-button-text-color: #ffffff !important;
  --el-button-hover-bg-color: var(--el-color-primary-light-3) !important;
  --el-button-hover-border-color: var(--el-color-primary-light-3) !important;
  --el-button-hover-text-color: #ffffff !important;
  --el-button-active-bg-color: var(--el-color-primary-dark-2) !important;
  --el-button-active-border-color: var(--el-color-primary-dark-2) !important;
  --el-button-active-text-color: #ffffff !important;
  box-shadow: none !important;
}
body.role-merchant.role-merchant #app .el-button.el-button--primary.is-plain {
  --el-button-bg-color: var(--el-color-primary-light-9) !important;
  --el-button-border-color: var(--el-color-primary-light-5) !important;
  --el-button-text-color: var(--el-color-primary) !important;
  --el-button-hover-bg-color: var(--el-color-primary) !important;
  --el-button-hover-border-color: var(--el-color-primary) !important;
  --el-button-hover-text-color: #ffffff !important;
  box-shadow: none !important;
}
/* 语义按钮跟随状态色两套 */
body.role-merchant.role-merchant #app .el-button.el-button--success {
  --el-button-bg-color: var(--el-color-success) !important;
  --el-button-border-color: var(--el-color-success) !important;
  --el-button-text-color: #ffffff !important;
  --el-button-hover-bg-color: var(--el-color-success-light-3) !important;
  --el-button-hover-border-color: var(--el-color-success-light-3) !important;
  --el-button-hover-text-color: #ffffff !important;
}
body.role-merchant.role-merchant #app .el-button.el-button--warning {
  --el-button-bg-color: var(--el-color-warning) !important;
  --el-button-border-color: var(--el-color-warning) !important;
  --el-button-text-color: #ffffff !important;
  --el-button-hover-bg-color: var(--el-color-warning-light-3) !important;
  --el-button-hover-border-color: var(--el-color-warning-light-3) !important;
  --el-button-hover-text-color: #ffffff !important;
}
body.role-merchant.role-merchant #app .el-button.el-button--danger {
  --el-button-bg-color: var(--el-color-danger) !important;
  --el-button-border-color: var(--el-color-danger) !important;
  --el-button-text-color: #ffffff !important;
  --el-button-hover-bg-color: var(--el-color-danger-light-3) !important;
  --el-button-hover-border-color: var(--el-color-danger-light-3) !important;
  --el-button-hover-text-color: #ffffff !important;
}

/* 输入/选择/文本域：圆角 8px + 深色描边（压制 pk-theme 灰描边） */
body.role-merchant.role-merchant #app .el-input__wrapper,
body.role-merchant.role-merchant #app .el-select__wrapper {
  border-radius: 8px !important;
}
body.role-merchant.role-merchant #app .el-textarea__inner {
  border-radius: 8px !important;
}
body.role-merchant.role-merchant.theme-cockpit #app .el-input__wrapper,
body.role-merchant.role-merchant.theme-cockpit #app .el-select__wrapper,
body.role-merchant.role-merchant.theme-cockpit #app .el-textarea__inner {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10) inset !important;
}
/* 卡片 */
body.role-merchant.role-merchant #app .el-card {
  border-radius: 8px !important;
}

/* 胶囊 tag 统一浅底体系（M-3：实底/浅底混搭 → 全浅底；999px 胶囊） */
body.role-merchant.role-merchant #app .el-tag {
  border-radius: 999px !important;
  border-color: transparent !important;
}
body.role-merchant.role-merchant.theme-cockpit #app .el-tag {
  background: rgba(255, 255, 255, .06) !important;
  color: #b3aca0 !important;
}
body.role-merchant.role-merchant.theme-cockpit #app .el-tag.el-tag--success {
  background: rgba(52, 199, 123, .14) !important;
  color: #34c77b !important;
}
body.role-merchant.role-merchant.theme-cockpit #app .el-tag.el-tag--warning {
  background: rgba(245, 179, 68, .14) !important;
  color: #f5b344 !important;
}
body.role-merchant.role-merchant.theme-cockpit #app .el-tag.el-tag--danger {
  background: rgba(255, 90, 78, .14) !important;
  color: #ff5a4e !important;
}
body.role-merchant.role-merchant.theme-cockpit #app .el-tag.el-tag--info {
  background: rgba(255, 255, 255, .06) !important;
  color: #b3aca0 !important;
}
body.role-merchant.role-merchant.theme-cockpit #app .el-tag.el-tag--primary {
  background: rgba(74, 125, 255, .16) !important;
  color: #6e95ff !important;
}
body.role-merchant.role-merchant.theme-alu #app .el-tag {
  background: #f0f0f2 !important;
  color: #6b7280 !important;
}
body.role-merchant.role-merchant.theme-alu #app .el-tag.el-tag--success {
  background: rgba(22, 163, 74, .10) !important;
  color: #16a34a !important;
}
body.role-merchant.role-merchant.theme-alu #app .el-tag.el-tag--warning {
  background: rgba(217, 119, 6, .10) !important;
  color: #d97706 !important;
}
body.role-merchant.role-merchant.theme-alu #app .el-tag.el-tag--danger {
  background: rgba(215, 25, 15, .08) !important;
  color: #d7190f !important;
}
body.role-merchant.role-merchant.theme-alu #app .el-tag.el-tag--info {
  background: #f0f0f2 !important;
  color: #6b7280 !important;
}
body.role-merchant.role-merchant.theme-alu #app .el-tag.el-tag--primary {
  background: #eaf1ff !important;
  color: #2f6bff !important;
}

/* 分页选中：蓝（压制商家块 .el-pagination .el-pager li.is-active 钉绿 #22c55e） */
body.role-merchant.role-merchant #app .el-pagination .el-pager li.is-active {
  background: var(--el-color-primary) !important;
  color: #ffffff !important;
}
body.role-merchant.role-merchant #app .el-pagination .el-pager li:hover {
  color: var(--el-color-primary) !important;
}
/* 分段/单选按钮选中：蓝系（压制商家块 checked 钉绿） */
body.role-merchant.role-merchant #app .el-radio-button__original-radio:checked + .el-radio-button__inner {
  background: var(--el-color-primary) !important;
  border-color: var(--el-color-primary) !important;
  color: #ffffff !important;
  box-shadow: -1px 0 0 0 var(--el-color-primary) !important;
}
/* el-tabs 激活：蓝系（压制商家块 is-active #4ee69a） */
body.role-merchant.role-merchant #app .el-tabs__item.is-active {
  color: var(--el-color-primary) !important;
}
body.role-merchant.role-merchant #app .el-tabs__active-bar {
  background-color: var(--el-color-primary) !important;
}

/* ---- 4. el-* 浮层（teleport 到 body，不带 #app 前缀） ---- */

body.role-merchant.role-merchant.theme-cockpit .el-dialog {
  background: #1d2026 !important;
  border-radius: 8px !important;
}
body.role-merchant.role-merchant.theme-alu .el-dialog {
  background: #ffffff !important;
  border-radius: 8px !important;
}
body.role-merchant.role-merchant.theme-cockpit .el-drawer {
  background: #181a1f !important;
}
body.role-merchant.role-merchant.theme-alu .el-drawer {
  background: #ffffff !important;
}
body.role-merchant.role-merchant.theme-cockpit .el-popper {
  background: #1d2026 !important;
  border-color: rgba(255, 255, 255, .07) !important;
}
body.role-merchant.role-merchant.theme-alu .el-popper {
  background: #ffffff !important;
}
/* 下拉面板选中项：蓝系 */
body.role-merchant.role-merchant .el-select-dropdown__item.is-selected {
  color: var(--el-color-primary) !important;
}
body.role-merchant.role-merchant .el-select-dropdown__item.is-hovering {
  background: var(--el-fill-color-light) !important;
}

/* ---- 5. 商家自定义组件收口 ---- */

/* 商家身份绿仅保留：余额仪表盘（tg-fill 环 / tg-num 数字） */
body.role-merchant.role-merchant.theme-cockpit .tg-fill,
body.role-merchant.role-merchant.theme-cockpit .tg-num {
  stroke: #22c55e !important;
  color: #22c55e !important;
}
body.role-merchant.role-merchant.theme-alu .tg-fill,
body.role-merchant.role-merchant.theme-alu .tg-num {
  stroke: #16a34a !important;
  color: #16a34a !important;
}
/* 在线/可卖状态点（--pf-accent 已收蓝，success 语义显式回绿） */
body.role-merchant.role-merchant.theme-cockpit #app .dot-green {
  background: #34c77b !important;
  box-shadow: 0 0 6px #34c77b !important;
}
body.role-merchant.role-merchant.theme-alu #app .dot-green {
  background: #16a34a !important;
  box-shadow: 0 0 6px #16a34a !important;
}
/* 主题选择卡选中：蓝框（--pf-accent 收蓝后自动跟随；theme-dot 预览条硬编码绿=身份点缀保留） */
/* 圆角 8px 令牌（自定义容器统一） */
body.role-merchant.role-merchant #app .mportal-nav,
body.role-merchant.role-merchant #app .theme-opt,
body.role-merchant.role-merchant #app .mw-link-btn {
  border-radius: 8px !important;
}
/* 文本链接按钮「更多→」：蓝系 */
body.role-merchant.role-merchant #app .mw-link-btn {
  color: var(--el-color-primary) !important;
}

/* ---- 6. el-table 表头分层 + 密度令牌（表头 40 / 行 44） ---- */

/* 表头分层（压制 pk-theme 层 body .el-table th 的 #fafafa 硬编码 + 商家块钉死层） */
body.role-merchant.role-merchant.theme-cockpit #app .el-table th.el-table__cell {
  background: #1b1e24 !important;
  color: #b3aca0 !important;
}
body.role-merchant.role-merchant.theme-alu #app .el-table th.el-table__cell {
  background: #faf9f7 !important;
  color: #6b7280 !important;
}
body.role-merchant.role-merchant.theme-cockpit #app .el-table .el-table__cell {
  border-color: rgba(255, 255, 255, .08) !important;
}
/* 密度令牌：表头 40 / 行 44（表格行列=密度令牌，非结构性容器；批 A 同法） */
body.role-merchant.role-merchant #app .el-table th.el-table__cell {
  height: 40px !important;
}
body.role-merchant.role-merchant #app .el-table td.el-table__cell {
  height: 44px !important;
}