/*
 * modernize-skin.css — 会员中心 Modernize 全局换肤（Element UI 版）
 * 原则：只覆盖装饰属性（色彩/圆角/阴影/字体），不动盒模型与 Vue 功能层。
 * 引入位置：header.php 中 common.css 之后。设计 token 与后台 modernize 主题一致。
 */

@import url("https://fonts.loli.net/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root {
  --mdz-primary: #5d87ff;
  --mdz-primary-dark: #4f73d9;
  --mdz-primary-light: #ecf2ff;
  --mdz-heading: #2a3547;
  --mdz-muted: #5a6a85;
  --mdz-border: #e5eaef;
  --mdz-body-bg: #f0f5f9;
  --mdz-card-shadow: rgba(145, 158, 171, 0.3) 0px 0px 2px 0px, rgba(145, 158, 171, 0.02) 0px 12px 24px -4px;
  --mdz-radius: 7px;
  --mdz-radius-lg: 11px;
  --mdz-font: "Plus Jakarta Sans", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ============ 全局 ============ */
body,
.el-button,
.el-input__inner,
.el-table,
.el-menu,
.el-dialog,
.el-message-box,
.el-pagination,
.el-select-dropdown,
.el-tabs {
  font-family: var(--mdz-font) !important;
}

body {
  color: var(--mdz-heading);
}

.el-main {
  background-color: var(--mdz-body-bg) !important;
}

a {
  color: var(--mdz-primary);
}

/* ============ 布局壳：侧栏（Modernize 白色 sidebar） ============ */
.el-aside {
  background-color: #fff !important;
  box-shadow: 0 0 2px rgba(145, 158, 171, 0.3);
}

.el-aside .el-menu {
  border-right: none !important;
  background-color: #fff !important;
}

.el-aside .el-menu-item,
.el-aside .el-submenu__title {
  background-color: #fff !important;
  color: var(--mdz-muted) !important;
  border-radius: var(--mdz-radius) !important;
  margin: 2px 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.el-aside .el-menu-item i,
.el-aside .el-submenu__title i {
  color: inherit !important;
}

.el-aside .el-menu-item:hover,
.el-aside .el-submenu__title:hover {
  background-color: var(--mdz-primary-light) !important;
  color: var(--mdz-primary) !important;
}

.el-aside .el-menu-item.is-active {
  background-color: var(--mdz-primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(93, 135, 255, 0.35);
}

.el-aside .el-menu .el-menu-item {
  min-width: 0;
}

.el-aside .line {
  background-color: var(--mdz-border) !important;
}

/* ============ 布局壳：顶栏 ============ */
.el-header,
.top-menu,
.el-container .el-header {
  background-color: #fff !important;
  box-shadow: 0 0 2px rgba(145, 158, 171, 0.3);
}

.el-header .el-menu,
.el-header .el-menu-item,
.el-header .el-submenu__title {
  background-color: #fff !important;
  color: var(--mdz-muted) !important;
}

.el-header .el-menu-item.is-active,
.el-header .el-menu-item:hover {
  color: var(--mdz-primary) !important;
  background-color: transparent !important;
}

.el-header .el-menu--horizontal > .el-menu-item.is-active {
  border-bottom-color: var(--mdz-primary) !important;
}

/* ============ 主色组件 ============ */
.el-button--primary {
  background-color: var(--mdz-primary) !important;
  border-color: var(--mdz-primary) !important;
  border-radius: var(--mdz-radius) !important;
  font-weight: 600;
}

.el-button--primary:hover,
.el-button--primary:focus {
  background-color: var(--mdz-primary-dark) !important;
  border-color: var(--mdz-primary-dark) !important;
}

.el-button {
  border-radius: var(--mdz-radius) !important;
}

.el-button--text,
.el-button--text span,
.el-link.el-link--primary {
  color: var(--mdz-primary);
}

/* ============ 卡片 / 容器 ============ */
.el-card,
.main-card,
.main-content > div,
.box-card {
  border-radius: var(--mdz-radius-lg) !important;
  border: none !important;
  box-shadow: var(--mdz-card-shadow) !important;
}

/* ============ 输入 ============ */
.el-input__inner,
.el-textarea__inner,
.el-select .el-input__inner {
  border-radius: var(--mdz-radius) !important;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: var(--mdz-primary) !important;
}

/* ============ 表格 ============ */
.el-table th {
  background-color: #f6f9fc !important;
  color: var(--mdz-heading) !important;
  font-weight: 600 !important;
}

.el-table td {
  color: var(--mdz-muted);
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #f6f9fc !important;
}

/* ============ 弹窗 / 下拉 / 消息 ============ */
.el-dialog,
.el-message-box {
  border-radius: var(--mdz-radius-lg) !important;
  box-shadow: var(--mdz-card-shadow) !important;
}

.el-dialog__title,
.el-message-box__title {
  color: var(--mdz-heading);
  font-weight: 700;
}

.el-select-dropdown,
.el-dropdown-menu,
.el-popover {
  border-radius: var(--mdz-radius) !important;
  box-shadow: var(--mdz-card-shadow) !important;
}

.el-select-dropdown__item.selected {
  color: var(--mdz-primary);
}

/* ============ 分页 / Tab / 标签 / 开关 ============ */
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: var(--mdz-primary) !important;
}

.el-pagination.is-background .el-pager li {
  border-radius: var(--mdz-radius) !important;
}

.el-pager li.active {
  color: var(--mdz-primary) !important;
}

.el-tabs__item.is-active {
  color: var(--mdz-primary) !important;
}

.el-tabs__active-bar {
  background-color: var(--mdz-primary) !important;
}

.el-tabs__item:hover {
  color: var(--mdz-primary);
}

.el-tag {
  border-radius: 6px !important;
  font-weight: 600;
}

.el-switch.is-checked .el-switch__core {
  background-color: var(--mdz-primary) !important;
  border-color: var(--mdz-primary) !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--mdz-primary) !important;
  border-color: var(--mdz-primary) !important;
}

.el-checkbox__input.is-checked + .el-checkbox__label,
.el-radio__input.is-checked + .el-radio__label {
  color: var(--mdz-primary) !important;
}

.el-loading-spinner .path {
  stroke: var(--mdz-primary);
}

/* ============ 旧主色残留覆盖（common.css 中 #1e41c9 的常见用法） ============ */
[style*="#1E41C9"],
[style*="#1e41c9"] {
  background-color: var(--mdz-primary) !important;
}