/* ============================================================
 * 用户中心 UI 美化层 (beautify.css) - 仿 qkidc.cn v3
 * 适配范围: clientarea 用户中心所有页面
 * 设计原则: 全快云风格 / #0052d9 主色 / 渐变蓝导航 / 4px 圆角
 * 加载位置: header.php 末尾,在所有主题与组件 CSS 之后
 * 功能保持: 100% 兼容,仅调整视觉表现
 * ============================================================ */

/* ===== 1. 主题色与基础变量(仿 qkidc.cn #0052d9 色系) ===== */
:root[theme='default'] {
  /* 主色 - 全快云商务蓝 #0052d9 */
  --uc-primary: #0052d9;
  --uc-primary-light: #1466ed;
  --uc-primary-dark: #002ab1;
  --uc-primary-darker: #003ec5;
  --uc-primary-bg: #F0F4FF;

  /* 状态色 */
  --uc-success: #10B981;
  --uc-success-bg: #ECFDF5;
  --uc-warning: #F59E0B;
  --uc-warning-bg: #FFFBEB;
  --uc-danger: #EF4444;
  --uc-danger-bg: #FEF2F2;
  --uc-info: #6B7280;
  --uc-info-bg: #F3F4F6;

  /* 文字 */
  --uc-text-primary: #111827;
  --uc-text-regular: #374151;
  --uc-text-secondary: #6B7280;
  --uc-text-placeholder: #9CA3AF;

  /* 边框/背景 */
  --uc-border: #E5E7EB;
  --uc-border-light: #F3F4F6;
  --uc-bg-page: #F5F7FA;
  --uc-bg-card: #FFFFFF;
  --uc-bg-hover: #F9FAFB;

  /* 阴影 - 克制 */
  --uc-shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  --uc-shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.06), 0 1px 2px 0 rgba(16, 24, 40, 0.04);
  --uc-shadow-md: 0 2px 4px -1px rgba(16, 24, 40, 0.06), 0 1px 2px -1px rgba(16, 24, 40, 0.04);

  /* 圆角 - 商务紧凑 */
  --uc-radius-sm: 4px;
  --uc-radius-md: 4px;
  --uc-radius-lg: 6px;

  /* 过渡 - 短而稳 */
  --uc-trans-fast: 0.15s ease;
  --uc-trans-base: 0.2s ease;
}

/* ===== 2. 全局基础 ===== */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--uc-bg-page) !important;
  color: var(--uc-text-primary);
  font-size: 14px;
}

* {
  scroll-behavior: smooth;
}

/* 紧凑滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(16, 24, 40, 0.18);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 24, 40, 0.28);
}

/* ===== 3. 主内容区 ===== */
.el-main {
  background-color: var(--uc-bg-page) !important;
  line-height: 1.6 !important;
  padding: 20px 24px !important;
}

.main-card {
  background: var(--uc-bg-card) !important;
  border: 1px solid var(--uc-border-light) !important;
  border-radius: var(--uc-radius-lg) !important;
  padding: 24px !important;
  box-shadow: var(--uc-shadow-xs) !important;
}

/* ===== 4. 卡片标题 ===== */
.main-card-title,
.account-title,
.basic-title,
.finance-title,
.title-text {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--uc-text-primary) !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--uc-border-light) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-card-title::before,
.title-text::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--uc-primary);
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
}

/* ===== 5. 侧边栏菜单 - 商务稳定 ===== */
.el-aside {
  background: linear-gradient(180deg, #0052d9 0%, #002ab1 100%) !important;
  box-shadow: 1px 0 4px rgba(0, 82, 217, 0.12);
  transition: width var(--uc-trans-base);
}

.el-menu {
  border-right: none !important;
  background: transparent !important;
  padding: 8px 10px;
}

.el-menu-item,
.el-submenu__title {
  border-radius: var(--uc-radius-sm) !important;
  height: 42px !important;
  line-height: 42px !important;
  margin-bottom: 2px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px !important;
  transition: all var(--uc-trans-fast) !important;
  padding-left: 16px !important;
}

.el-menu-item:hover,
.el-submenu__title:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

.el-menu-item.is-active {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: var(--uc-primary) !important;
  font-weight: 600 !important;
  box-shadow: var(--uc-shadow-xs);
}

.el-submenu .el-menu-item {
  background-color: rgba(0, 0, 0, 0.15) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  height: 38px !important;
  line-height: 38px !important;
  margin: 2px 0 !important;
}

.el-submenu .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.el-submenu .el-menu-item.is-active {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: var(--uc-primary) !important;
}

/* ===== 6. 顶部菜单栏 ===== */
.el-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--uc-border-light) !important;
  box-shadow: var(--uc-shadow-xs) !important;
  line-height: normal !important;
  height: 60px !important;
  padding: 0 24px !important;
}

/* ===== 7. 按钮 - 商务紧凑 ===== */
.el-button {
  border-radius: var(--uc-radius-sm) !important;
  font-weight: 500 !important;
  transition: all var(--uc-trans-fast) !important;
  padding: 9px 16px !important;
  font-size: 14px !important;
}

.el-button--primary {
  background: var(--uc-primary) !important;
  border-color: var(--uc-primary) !important;
}

.el-button--primary:hover {
  background: var(--uc-primary-light) !important;
  border-color: var(--uc-primary-light) !important;
}

.el-button--primary:active {
  background: var(--uc-primary-dark) !important;
  transform: scale(0.98) !important;
}

.el-button--success {
  background: var(--uc-success) !important;
  border-color: var(--uc-success) !important;
}
.el-button--success:hover {
  background: #059669 !important;
  border-color: #059669 !important;
}

.el-button--danger {
  background: var(--uc-danger) !important;
  border-color: var(--uc-danger) !important;
}
.el-button--danger:hover {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
}

.el-button--default {
  border-color: var(--uc-border) !important;
  color: var(--uc-text-regular) !important;
  background: #ffffff !important;
}
.el-button--default:hover {
  color: var(--uc-primary) !important;
  border-color: var(--uc-primary) !important;
  background-color: var(--uc-primary-bg) !important;
}

.el-button--text {
  color: var(--uc-primary) !important;
  font-weight: 500 !important;
}
.el-button--text:hover {
  color: var(--uc-primary-dark) !important;
}

.el-button--small {
  padding: 7px 12px !important;
  font-size: 13px !important;
}

/* ===== 8. 输入框/表单 ===== */
.el-input__inner,
.el-textarea__inner {
  border-radius: var(--uc-radius-sm) !important;
  border-color: var(--uc-border) !important;
  transition: all var(--uc-trans-fast) !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 14px !important;
}

.el-textarea__inner {
  height: auto !important;
  line-height: 1.6 !important;
  padding: 8px 12px !important;
}

.el-input__inner:hover,
.el-textarea__inner:hover {
  border-color: #C5CBD6 !important;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: var(--uc-primary) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12) !important;
}

.el-select .el-input__inner {
  border-radius: var(--uc-radius-sm) !important;
}

.el-form-item {
  margin-bottom: 20px !important;
}

.el-form-item__label {
  color: var(--uc-text-regular) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 36px !important;
}

/* ===== 9. 表格 - 商务专业 ===== */
.el-table {
  border-radius: var(--uc-radius-md) !important;
  overflow: hidden;
  border: 1px solid var(--uc-border-light) !important;
  font-size: 14px !important;
}

.el-table th.el-table__cell {
  background-color: #F9FAFB !important;
  color: var(--uc-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--uc-border-light) !important;
}

.el-table td.el-table__cell {
  border-bottom: 1px solid var(--uc-border-light) !important;
  padding: 14px 0 !important;
  color: var(--uc-text-regular);
}

.el-table__row:hover > td.el-table__cell {
  background-color: var(--uc-bg-hover) !important;
}

.el-table--border,
.el-table--group {
  border: 1px solid var(--uc-border-light) !important;
  border-radius: var(--uc-radius-md) !important;
}

.el-table .el-table__cell.is-leaf {
  border-bottom: 1px solid var(--uc-border-light) !important;
}

/* 表格内的操作按钮 */
.el-table .el-button {
  padding: 5px 10px !important;
  font-size: 13px !important;
}

/* ===== 10. 对话框/弹窗 ===== */
.el-dialog {
  border-radius: var(--uc-radius-lg) !important;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06) !important;
  overflow: hidden;
  border: 1px solid var(--uc-border-light) !important;
}

.el-dialog__header {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--uc-border-light);
  margin: 0 !important;
  background: #FAFBFC;
}

.el-dialog__title {
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var(--uc-text-primary) !important;
}

.el-dialog__headerbtn {
  top: 16px !important;
  right: 16px !important;
}

.el-dialog__body {
  padding: 20px !important;
  color: var(--uc-text-regular);
}

.el-dialog__footer {
  padding: 12px 20px 16px !important;
  border-top: 1px solid var(--uc-border-light);
  background: #FAFBFC;
}

/* ===== 11. 标签/徽章 ===== */
.el-tag {
  border-radius: var(--uc-radius-sm) !important;
  font-weight: 500 !important;
  border: none !important;
  padding: 0 10px !important;
  height: 24px !important;
  line-height: 22px !important;
  font-size: 12px !important;
}

.el-tag--success {
  background-color: var(--uc-success-bg) !important;
  color: #047857 !important;
}
.el-tag--warning {
  background-color: var(--uc-warning-bg) !important;
  color: #B45309 !important;
}
.el-tag--danger {
  background-color: var(--uc-danger-bg) !important;
  color: #B91C1C !important;
}
.el-tag--info {
  background-color: var(--uc-info-bg) !important;
  color: #4B5563 !important;
}
.el-tag--primary {
  background-color: var(--uc-primary-bg) !important;
  color: var(--uc-primary-dark) !important;
}

/* ===== 12. 分页 ===== */
.el-pagination {
  margin-top: 20px;
  padding: 16px 0 0 !important;
  text-align: right;
}

.el-pagination .btn-prev,
.el-pagination .btn-next,
.el-pagination .el-pager li {
  border-radius: var(--uc-radius-sm) !important;
  margin: 0 2px !important;
  font-weight: 500 !important;
  transition: all var(--uc-trans-fast) !important;
  min-width: 32px;
  height: 32px;
  line-height: 30px;
}

.el-pagination .el-pager li.active {
  background-color: var(--uc-primary) !important;
  color: #fff !important;
}

/* ===== 13. 卡片组件 ===== */
.el-card {
  border-radius: var(--uc-radius-md) !important;
  border: 1px solid var(--uc-border-light) !important;
  box-shadow: var(--uc-shadow-xs) !important;
  transition: border-color var(--uc-trans-fast) !important;
}

.el-card:hover {
  border-color: var(--uc-border) !important;
}

.el-card__header {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--uc-border-light) !important;
  font-weight: 600;
}

.el-card__body {
  padding: 18px !important;
}

/* ===== 14. 面包屑 ===== */
.el-breadcrumb {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.el-breadcrumb__inner {
  color: var(--uc-text-secondary) !important;
}

.el-breadcrumb__inner.is-link:hover {
  color: var(--uc-primary) !important;
}

/* ===== 15. 开关 ===== */
.el-switch.is-checked .el-switch__core {
  background-color: var(--uc-primary) !important;
  border-color: var(--uc-primary) !important;
}

.el-switch__core {
  border-radius: 20px !important;
}

/* ===== 16. 消息提示 ===== */
.el-message {
  border-radius: var(--uc-radius-md) !important;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.10) !important;
  border: none !important;
  padding: 10px 16px !important;
  top: 24px !important;
  font-size: 14px;
}

.el-message--success { background-color: var(--uc-success-bg) !important; }
.el-message--warning { background-color: var(--uc-warning-bg) !important; }
.el-message--error   { background-color: var(--uc-danger-bg) !important; }

/* ===== 17. 通知 ===== */
.el-notification {
  border-radius: var(--uc-radius-md) !important;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12) !important;
  border: 1px solid var(--uc-border-light) !important;
  padding: 14px 18px !important;
}

/* ===== 18. 下拉菜单 ===== */
.el-dropdown-menu {
  border-radius: var(--uc-radius-md) !important;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.10) !important;
  border: 1px solid var(--uc-border-light) !important;
  padding: 4px !important;
}

.el-dropdown-menu__item {
  border-radius: var(--uc-radius-sm) !important;
  padding: 8px 14px !important;
  font-size: 14px;
  transition: all var(--uc-trans-fast) !important;
}

.el-dropdown-menu__item:hover {
  background-color: var(--uc-primary-bg) !important;
  color: var(--uc-primary) !important;
}

/* ===== 19. Tooltip ===== */
.el-tooltip__popper {
  border-radius: var(--uc-radius-sm) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

/* ===== 20. Tabs ===== */
.el-tabs__item {
  font-weight: 500 !important;
  color: var(--uc-text-secondary) !important;
  font-size: 14px !important;
  height: 44px !important;
  line-height: 44px !important;
  transition: color var(--uc-trans-fast) !important;
}

.el-tabs__item.is-active {
  color: var(--uc-primary) !important;
  font-weight: 600 !important;
}

.el-tabs__item:hover {
  color: var(--uc-primary) !important;
}

.el-tabs__active-bar {
  background-color: var(--uc-primary) !important;
  height: 2px !important;
  border-radius: 1px;
}

.el-tabs__nav-wrap::after {
  background-color: var(--uc-border-light) !important;
  height: 1px !important;
}

/* ===== 21. 复选框/单选框 ===== */
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--uc-primary) !important;
  border-color: var(--uc-primary) !important;
}

.el-checkbox__inner,
.el-radio__inner {
  border-radius: 3px !important;
  transition: all var(--uc-trans-fast) !important;
}

.el-radio__inner {
  border-radius: 50% !important;
}

/* ===== 22. 步骤条 ===== */
.el-step__head.is-process {
  color: var(--uc-primary) !important;
  border-color: var(--uc-primary) !important;
}

.el-step__title.is-process {
  color: var(--uc-primary) !important;
  font-weight: 500;
}

/* ===== 23. 全局过渡 ===== */
a, button, input, .el-button, .el-tag, .el-card, .el-input__inner, .el-table__row {
  transition: all var(--uc-trans-fast) !important;
}

/* ===== 24. 文字与链接 ===== */
h1, h2, h3, h4, h5, h6 {
  color: var(--uc-text-primary) !important;
  font-weight: 600;
}

a {
  color: var(--uc-primary);
  text-decoration: none;
  transition: color var(--uc-trans-fast);
}
a:hover {
  color: var(--uc-primary-dark);
}

/* 蓝色文字类(原有样式) */
.bule-text,
.bule-text:link,
.bule-text:visited {
  color: var(--uc-primary) !important;
  cursor: pointer;
  transition: color var(--uc-trans-fast);
}
.bule-text:hover {
  color: var(--uc-primary-dark) !important;
}

/* ===== 25. 加载动画 ===== */
#mainLoading {
  background: linear-gradient(135deg, #f5f7fa 0%, #e5eaf2 100%) !important;
}

#mainLoading .ddr {
  border-radius: 50% !important;
}

/* ===== 26. 空状态 ===== */
.el-empty__description p {
  color: var(--uc-text-secondary) !important;
  font-size: 14px !important;
}

/* ===== 27. 日期选择器 ===== */
.el-date-editor .el-input__inner {
  border-radius: var(--uc-radius-sm) !important;
}

.el-picker-panel {
  border-radius: var(--uc-radius-md) !important;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12) !important;
  border: 1px solid var(--uc-border-light) !important;
}

/* ===== 28. Alert 提示 ===== */
.el-alert {
  border-radius: var(--uc-radius-md) !important;
  padding: 10px 14px !important;
  font-size: 14px;
}

/* ===== 29. MessageBox ===== */
.el-message-box {
  border-radius: var(--uc-radius-lg) !important;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12) !important;
  border: 1px solid var(--uc-border-light);
}

/* ===== 30. Popover ===== */
.el-popover {
  border-radius: var(--uc-radius-md) !important;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.10) !important;
  border: 1px solid var(--uc-border-light) !important;
  padding: 10px 14px !important;
}

/* ===== 31. 折叠面板 ===== */
.el-collapse-item__header {
  font-weight: 500 !important;
  color: var(--uc-text-primary) !important;
  border-bottom: 1px solid var(--uc-border-light) !important;
  padding-left: 16px !important;
  font-size: 14px;
}

.el-collapse-item__wrap {
  border-bottom: 1px solid var(--uc-border-light) !important;
}

/* ===== 32. Badge ===== */
.el-badge__content {
  border-radius: 10px !important;
  font-weight: 600 !important;
}

/* ===== 33. 进度条 ===== */
.el-progress-bar__outer {
  border-radius: 100px !important;
  background-color: var(--uc-border-light) !important;
}

.el-progress-bar__inner {
  border-radius: 100px !important;
}

/* ===== 34. 响应式微调 ===== */
@media (max-width: 1200px) {
  .el-dialog { width: 90% !important; }
  .el-main { padding: 16px !important; }
}

/* ===== 35. 打印 ===== */
@media print {
  .el-aside, .el-header, .top-menu { display: none !important; }
  .el-main { padding: 0 !important; }
}