/* ============================================================
 * RY888 三端统一设计系统 · 批A：密钥工作台（用户端）收口层
 * 文件：user-overlay.css（独立部署，新文件名破 immutable）
 * 作用域：body.role-user（theme-cockpit 深 / theme-alu 浅 双主题）
 * 原则：纯令牌级改造——色板/圆角/密度/边框/字重/组件表面；
 *       布局骨架零触碰（禁结构性容器 height/width/overflow/margin/padding）
 * 口径：主按钮蓝（深 #4a7dff / 浅 #2f6bff）；交互选中态一律蓝系；
 *       红 #e32119 系仅点缀（品牌环/错误语义/告警）；圆角 8px 令牌；
 *       胶囊 tag；密度表头 40 / 行 44；状态色深浅各一套
 * ============================================================ */

/* ---- 1. 令牌层 · 深色 cockpit ---- */
body.role-user.role-user.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;
  /* 状态色（深色一套） */
  --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;
  /* 徽标底/选中底：蓝系 */
  --pf-badge-bg: rgba(74, 125, 255, .18) !important;
  --pf-selected-bg: rgba(74, 125, 255, .18) !important;
  /* 导航选中：蓝实底白字；光晕改蓝 */
  --pf-nav-active: #4a7dff !important;
  --pf-nav-active-text: #ffffff !important;
  --pf-btn-glow: 0 4px 16px rgba(74, 125, 255, .38) !important;
}

/* ---- 2. 令牌层 · 浅色 alu ---- */
body.role-user.role-user.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;
  /* 状态色（浅色一套） */
  --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;
  /* 徽标底/选中底：蓝系 */
  --pf-badge-bg: rgba(47, 107, 255, .10) !important;
  --pf-selected-bg: #eaf1ff !important;
  /* 导航选中：蓝实底白字；光晕改蓝 */
  --pf-nav-active: #2f6bff !important;
  --pf-nav-active-text: #ffffff !important;
  --pf-btn-glow: 0 4px 12px rgba(47, 107, 255, .22) !important;
}

/* ---- 3. el-* 组件表面（页面内） ---- */

/* 按钮圆角 8px */
body.role-user.role-user #app .el-button {
  border-radius: 8px !important;
}
/* 按钮色变量收口：压制 pk-theme 层 body .el-button.el-button--primary 的 #40a0ff 硬编码 */
body.role-user.role-user #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;
}
body.role-user.role-user #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;
}
body.role-user.role-user #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-user.role-user #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-user.role-user #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;
}
/* 输入/选择/文本域 */
body.role-user.role-user #app .el-input__wrapper {
  border-radius: 8px !important;
}
body.role-user.role-user #app .el-textarea__inner {
  border-radius: 8px !important;
}
/* 卡片 */
body.role-user.role-user #app .el-card {
  border-radius: 8px !important;
}
/* 胶囊 tag（R1 胶囊令牌） */
body.role-user.role-user #app .el-tag {
  border-radius: 999px !important;
}
/* 分页选中：蓝 */
body.role-user.role-user #app .el-pagination .is-active {
  background: var(--el-color-primary) !important;
}
body.role-user.role-user #app .el-pagination .el-pager li:hover {
  color: var(--el-color-primary) !important;
}
/* 分段/单选按钮选中：蓝系 */
body.role-user.role-user #app .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: var(--el-color-primary) !important;
  border-color: var(--el-color-primary) !important;
  color: #ffffff !important;
}

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

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

/* ---- 5. 用户端自定义组件收口 ---- */

/* 主按钮统一蓝：取号 btn-take / 充值 rc-btn / API 文档 btn-api-doc（金/碳纤维 → 蓝实底白字） */
body.role-user.role-user.theme-cockpit .btn-take,
body.role-user.role-user.theme-cockpit .rc-btn,
body.role-user.role-user.theme-cockpit .btn-api-doc {
  background: #4a7dff !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 16px rgba(74, 125, 255, .35) !important;
}
body.role-user.role-user.theme-alu .btn-take,
body.role-user.role-user.theme-alu .rc-btn,
body.role-user.role-user.theme-alu .btn-api-doc {
  background: #2f6bff !important;
  color: #ffffff !important;
  border-color: rgba(0, 0, 0, .06) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 12px rgba(47, 107, 255, .28) !important;
}

/* 灰标徽标令牌化：深色下用深表面，浅色保持原灰 */
body.role-user.role-user.theme-cockpit .tier-badge,
body.role-user.role-user.theme-cockpit .line-badge {
  background: rgba(255, 255, 255, .07) !important;
  color: #b3aca0 !important;
}
body.role-user.role-user.theme-alu .tier-badge,
body.role-user.role-user.theme-alu .line-badge {
  background: #f0f0f2 !important;
  color: #6b7280 !important;
}
/* 胶囊 tag 令牌（自定义胶囊统一 999px） */
body.role-user.role-user #app .tier-badge,
body.role-user.role-user #app .line-badge,
body.role-user.role-user #app .mc-seq-badge,
body.role-user.role-user #app .mc-flow-chip,
body.role-user.role-user #app .rc-badge {
  border-radius: 999px !important;
}

/* 记录页 inline 胶囊（多码/第N码）：深色下换深表面令牌色 */
body.role-user.role-user.theme-cockpit #app span[style*="f0f0f2"] {
  background: rgba(255, 255, 255, .07) !important;
  color: #b3aca0 !important;
}
body.role-user.role-user.theme-cockpit #app span[style*="fff3e0"] {
  background: rgba(245, 179, 68, .14) !important;
  color: #f5b344 !important;
}

/* 选中态蓝系：picker 货架/项目行（红字 → 蓝字） */
body.role-user.role-user #app .picker-cat.active,
body.role-user.role-user #app .picker-item.selected {
  color: var(--el-color-primary) !important;
}
/* 主题选择卡选中：红框 → 蓝框 */
body.role-user.role-user #app .theme-opt.active {
  border-color: var(--el-color-primary) !important;
  box-shadow: 0 0 0 1px var(--el-color-primary) inset !important;
}
/* 看板分类选中：跟随 el 蓝变量（light-9 底 + primary 字） */
body.role-user.role-user #app .category-item.active {
  color: var(--el-color-primary) !important;
}

/* 圆角 8px 令牌（自定义容器统一） */
body.role-user.role-user #app .portal-nav,
body.role-user.role-user #app .task-table-wrap,
body.role-user.role-user #app .picker-panel,
body.role-user.role-user #app .mc-zone,
body.role-user.role-user #app .task-card,
body.role-user.role-user #app .recharge-card,
body.role-user.role-user #app .pm-card {
  border-radius: 8px !important;
}
body.role-user.role-user #app .portal-nav a,
body.role-user.role-user #app .btn-clear,
body.role-user.role-user #app .picker-trigger,
body.role-user.role-user #app .mc-card,
body.role-user.role-user #app .theme-opt,
body.role-user.role-user #app .rc-icon {
  border-radius: 8px !important;
}
body.role-user.role-user #app .picker-search input,
body.role-user.role-user #app .detect-tag,
body.role-user.role-user #app .fb-btn,
body.role-user.role-user #app .fb-release,
body.role-user.role-user #app .mc-collapse-btn {
  border-radius: 8px !important;
}

/* 密度令牌：任务表格头 40 / 行 44（表格行列=密度令牌，非结构性容器） */
body.role-user.role-user #app .task-table th {
  height: 40px !important;
}
body.role-user.role-user #app .task-table td {
  height: 44px !important;
}

/* 深色表格表头表面（chunk scoped 表头底色与令牌对齐，双保险） */
body.role-user.role-user.theme-cockpit #app .task-table th {
  background: #1b1e24 !important;
  color: #b3aca0 !important;
}

/* ---- 6. el-table 表头分层（压制 pk-theme 层 body .el-table th 的 #fafafa 硬编码） ---- */
body.role-user.role-user.theme-cockpit #app .el-table th.el-table__cell {
  background: #1b1e24 !important;
  color: #b3aca0 !important;
}
body.role-user.role-user.theme-alu #app .el-table th.el-table__cell {
  background: #faf9f7 !important;
  color: #6b7280 !important;
}
body.role-user.role-user.theme-cockpit #app .el-table .el-table__cell {
  border-color: rgba(255, 255, 255, .08) !important;
}
/* 深色输入/选择描边（压制 pk-theme 层 0 0 0 1px #d1d5db 浅灰描边） */
body.role-user.role-user.theme-cockpit #app .el-input__wrapper,
body.role-user.role-user.theme-cockpit #app .el-select__wrapper,
body.role-user.role-user.theme-cockpit #app .el-textarea__inner {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10) inset !important;
}