/*
 * modernize-components.css — Element UI 组件 → Modernize 视觉对齐层（差异报告严重度 4~8 落地）
 *
 * 用途：把 element.css 默认组件视觉（Element 蓝 #409eff/#ecf5ff、4px 圆角、灰边框）
 * 统一替换为 Modernize 设计 token，并修正 modernize-skin.css 中的错误 token 值。
 *
 * token 速查：
 *   圆角 7px ｜ 面板阴影 rgba(145,158,171,.2) 0 0 2px 0, rgba(145,158,171,.12) 0 12px 24px -4px
 *   主色 #5d87ff ｜ item hover #ecf2ff / 文字 #5d87ff ｜ 中性 hover #f6f9fc
 *   输入边框 #dfe5ef ｜ focus 边框 #aec3ff + 光环 0 0 0 4px rgba(93,135,255,.25)
 *   正文 #5a6a85 ｜ 标题 #2a3547 ｜ 分隔线 #ebf1f6 ｜ danger #fa896b
 *
 * 优先级策略：本文件与 modernize-skin.css / modernize-fix.css 的加载顺序不做假设，
 * 凡与二者冲突的声明一律用「类名重复提升优先级」(.x.x) 或 !important 压制；
 * 仅与 element.css（必定先加载）冲突的声明用同优先级选择器即可。
 * 全部 px，禁 rem（根字号被 common.js 动态改写）。
 */

/* ════════════════════════════════════════════════════════════════
   0. 修正 modernize-skin.css 的错误 token（严重度 5 / 8-1）
   html:root (0,1,1) > skin 的 :root (0,1,0)，加载顺序无关
   ════════════════════════════════════════════════════════════════ */
html:root {
  /* 原版 .card：rgba(145,158,171,.2) + 第二层 .12（skin 误写 .3/.02，卡片无浮起感） */
  --mdz-card-shadow: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px,
                     rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
  /* 原版全局 --bs-border-radius:7px，卡片/弹窗统一 7px，不存在 11px */
  --mdz-radius-lg: 7px;
  /* 原版 --bs-body-bg:#fff，内容区白底、卡片靠阴影区分层级（skin 误用 #f0f5f9） */
  --mdz-body-bg: #fff;
}

/* ════════════════════════════════════════════════════════════════
   1. 下拉/弹层面板统一（严重度 4）：7px 圆角、无边框、Modernize 阴影
   ════════════════════════════════════════════════════════════════ */
.el-dropdown-menu.el-dropdown-menu,
.el-select-dropdown.el-select-dropdown,
.el-autocomplete-suggestion.el-autocomplete-suggestion,
.el-picker-panel.el-picker-panel,
.el-time-panel.el-time-panel,
.el-cascader__dropdown.el-cascader__dropdown,
.el-popover.el-popover {
  border: none !important;
  border-radius: 7px !important;
  box-shadow: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px,
              rgba(145, 158, 171, 0.12) 0px 12px 24px -4px !important;
  color: #5a6a85;
}

/* 原版 --bs-dropdown-padding-y:8px；.topbar 下拉 min-width:200px */
.el-dropdown-menu {
  padding: 8px 0;
  min-width: 200px;
}

/* Modernize dropdown 无指示箭头 */
.el-dropdown-menu .popper__arrow,
.el-select-dropdown .popper__arrow,
.el-autocomplete-suggestion .popper__arrow,
.el-cascader__dropdown .popper__arrow,
.el-popover .popper__arrow {
  display: none !important;
}

/* 出现动画对齐原版 dropdown-menu-animate-up（0.5s fade-in） */
@keyframes mdz-dd-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.el-dropdown-menu,
.el-select-dropdown,
.el-autocomplete-suggestion {
  animation: mdz-dd-fade-in 0.5s ease 1;
}

/* ════════════════════════════════════════════════════════════════
   2. 下拉 item（含语言下拉、用户菜单）（严重度 4）
   ════════════════════════════════════════════════════════════════ */
.el-dropdown-menu__item {
  padding: 10px 16px;           /* 原版 item padding-y:10px / padding-x:16px */
  line-height: 20px;
  font-size: 14px;
  color: #5a6a85;
  border-radius: 8px;           /* 原版 .topbar 下拉 item 圆角 8px */
  margin: 0 8px;
}

.el-dropdown-menu__item i {
  margin-right: 8px;
  font-size: 18px;
}

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #ecf2ff !important;  /* 压掉 element 的 #ecf5ff/#66b1ff */
  color: #5d87ff !important;
}

.el-dropdown-menu__item--divided {
  margin-top: 8px;
  border-top: 1px solid #ebf1f6;
}

.el-dropdown-menu__item--divided:before {
  margin: 0 -16px;
}

/* 用户菜单面板：原版 --bs-dropdown-border-width:0，无边框纯阴影
   （压制 modernize-fix.css 的 border:1px solid #e5eaef 与 .3/.12 阴影） */
.el-dropdown-menu.mdz-user-dd {
  border: none !important;
  box-shadow: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px,
              rgba(145, 158, 171, 0.12) 0px 12px 24px -4px !important;
}

/* item hover：fix.css 的 #f6f9fc → 原版 primary-subtle token（(0,4,0) 压 (0,3,0)） */
.el-dropdown-menu.mdz-user-dd .el-dropdown-menu__item:hover {
  background: #ecf2ff;
  color: #5d87ff;
}

/* ════════════════════════════════════════════════════════════════
   3. el-select / el-cascader 弹层 item（严重度 4）
   ════════════════════════════════════════════════════════════════ */
.el-select-dropdown__item {
  height: auto;
  padding: 10px 16px;
  line-height: 20px;
  font-size: 14px;
  color: #5a6a85;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #ecf2ff;
  color: #5d87ff;
}

/* 原版 select2 选中态：主色实底白字 */
.el-select-dropdown__item.selected {
  background-color: #5d87ff !important;
  color: #fff !important;
  font-weight: 500;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  background-color: #ecf2ff !important;
  color: #5d87ff !important;
}

.el-select-dropdown__empty {
  padding: 12px 0;
  font-size: 14px;
  color: #5a6a85;
}

/* cascader 节点对齐同一套 token */
.el-cascader-node {
  color: #5a6a85;
  font-size: 14px;
}

.el-cascader-node:not(.is-disabled):focus,
.el-cascader-node:not(.is-disabled):hover {
  background: #ecf2ff;
  color: #5d87ff;
}

.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node.is-selectable.in-checked-path {
  color: #5d87ff;
  font-weight: 600;
}

.el-cascader-menu {
  border-right: 1px solid #ebf1f6;
  color: #5a6a85;
}

/* ════════════════════════════════════════════════════════════════
   4. 输入框 = form-control / select 触发器 = form-select（严重度 6）
   ════════════════════════════════════════════════════════════════ */
.el-input__inner,
.el-textarea__inner {
  border: 1px solid #dfe5ef;
  border-radius: 7px !important;
  color: #5a6a85;
  font-size: 14px;
  background-color: transparent;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* form-control 高度：8px*2 padding + 21px 行高 + 2px 边框 ≈ 39px */
.el-input__inner {
  height: 39px;
  line-height: 39px;
  padding: 0 16px;
}

.el-textarea__inner {
  padding: 8px 16px;
}

.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
  color: rgba(90, 106, 133, 0.75);
}

.el-input__inner:hover,
.el-textarea__inner:hover {
  border-color: #dfe5ef;
}

/* 原版 focus：浅蓝 #aec3ff 边框 + 4px 光环（skin 误用纯 #5d87ff）
   .x.x:focus (0,3,0)+!important 压 skin 的 (0,2,0)+!important，加载顺序无关 */
.el-input__inner.el-input__inner:focus,
.el-input.is-focus .el-input__inner.el-input__inner,
.el-textarea__inner.el-textarea__inner:focus {
  border-color: #aec3ff !important;
  box-shadow: 0 0 0 4px rgba(93, 135, 255, 0.25);
  outline: 0;
}

/* 顶栏全局搜索输入框是无边框融入式，排除 focus 光环（压 (0,3,0) 规则） */
.mdz-header .mdz-header__search .el-input__inner:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* select 触发器箭头：保留 element 字形，颜色对齐 form-select 的 #5a6a85 */
.el-select .el-input .el-select__caret {
  color: #5a6a85;
  font-size: 14px;
}

.el-input__icon {
  line-height: 39px;
}

/* 带前置/后置块的 input-group 圆角拼接 */
.el-input-group__prepend {
  border-radius: 7px 0 0 7px;
  border-color: #dfe5ef;
  background-color: #f6f9fc;
}

.el-input-group__append {
  border-radius: 0 7px 7px 0;
  border-color: #dfe5ef;
  background-color: #f6f9fc;
}

/* 错误态对齐 Modernize danger（#fa896b）；置于 focus 规则之后，
   同优先级 (0,3,0) 靠书写顺序保证 error-on-focus 仍显示红边 */
.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-textarea__inner,
.el-form-item.is-error .el-input__inner.el-input__inner:focus,
.el-form-item.is-error .el-textarea__inner.el-textarea__inner:focus {
  border-color: #fa896b !important;
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════
   5. 分页 = .pagination / .page-link（严重度 7）
   ════════════════════════════════════════════════════════════════ */
.el-pagination {
  font-weight: 400;
  color: #2a3547;
}

.el-pagination button,
.el-pager li {
  min-width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #2a3547;
  border-radius: 7px;          /* --bs-pagination-border-radius:7px */
  background: transparent;
  margin: 0 2px;
}

.el-pager li:hover,
.el-pagination button:hover {
  color: #5d87ff;
  background-color: #f6f9fc;   /* --bs-pagination-hover-bg */
}

/* .active.active (0,3,1) 压 skin 的 .el-pager li.active (0,2,0)+!important */
.el-pager li.active.active,
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #5d87ff !important;  /* --bs-pagination-active-bg */
  color: #fff !important;
}

.el-pagination.is-background .el-pager li,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next {
  background-color: transparent;
  border-radius: 7px;
}

.el-pagination .el-select .el-input .el-input__inner {
  height: 32px;
  line-height: 32px;
  border-radius: 7px;
}

/* ════════════════════════════════════════════════════════════════
   6. 对话框 = .modal-content（严重度 5/7）
   .x.x (0,2,0)+!important 压 skin 的 (0,1,0)+!important（阴影改 box-shadow-sm）
   ════════════════════════════════════════════════════════════════ */
.el-dialog.el-dialog,
.el-message-box.el-message-box {
  border-radius: 7px !important;                          /* --bs-modal-border-radius:7px */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075) !important;  /* --bs-box-shadow-sm */
}

.el-dialog__header,
.el-message-box__header {
  padding: 16px;
  border-bottom: none;          /* --bs-modal-header-border-width:0 */
}

.el-dialog__title.el-dialog__title,
.el-message-box__title.el-message-box__title {
  font-size: 16px;
  font-weight: 600;             /* 原版 modal-title 600（skin 误用 700） */
  color: #2a3547;
}

.el-dialog__body {
  padding: 16px;
  color: #5a6a85;
  font-size: 14px;
}

.el-dialog__footer {
  padding: 12px 16px 16px;
  border-top: none;             /* --bs-modal-footer-border-width:0 */
}

/* ════════════════════════════════════════════════════════════════
   7. 消息条 = .alert（bg-subtle 色系）（严重度 7）
   ════════════════════════════════════════════════════════════════ */
.el-message {
  border: none;
  border-radius: 7px;
  padding: 12px 16px;
  min-width: 320px;
  box-shadow: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px,
              rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
}

.el-message--success { background-color: #e6fffa; }  /* --bs-success-bg-subtle */
.el-message--success .el-message__content,
.el-message--success .el-message__icon { color: #08594a; }

.el-message--warning { background-color: #fef5e5; }  /* --bs-warning-bg-subtle */
.el-message--warning .el-message__content,
.el-message--warning .el-message__icon { color: #66460c; }

.el-message--error { background-color: #fbf2ef; }    /* --bs-danger-bg-subtle */
.el-message--error .el-message__content,
.el-message--error .el-message__icon { color: #64372b; }

.el-message--info { background-color: #ebf3fe; }     /* --bs-info-bg-subtle */
.el-message--info .el-message__content,
.el-message--info .el-message__icon { color: #213e66; }

/* el-notification 同步面板 token（与 el-message 同属消息弹层） */
.el-notification.el-notification {
  border: none;
  border-radius: 7px;
  box-shadow: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px,
              rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
}

.el-notification__title { color: #2a3547; }
.el-notification__content { color: #5a6a85; }

/* ════════════════════════════════════════════════════════════════
   8. Tooltip = .tooltip（严重度 7）
   ════════════════════════════════════════════════════════════════ */
.el-tooltip__popper.is-dark {
  background-color: #2a3547;     /* --bs-tooltip-bg */
  border-radius: 7px;
  font-size: 12px;               /* --bs-tooltip-font-size */
  padding: 4px 8px;
  line-height: 1.5;
}

.el-tooltip__popper.is-dark .popper__arrow,
.el-tooltip__popper.is-dark .popper__arrow::after {
  border-top-color: #2a3547;
  border-bottom-color: #2a3547;
}

/* ════════════════════════════════════════════════════════════════
   9. 复选 / 单选（严重度 7）
   选中主色已由 modernize-skin.css 覆盖，此处只对齐未选中态与文字
   ════════════════════════════════════════════════════════════════ */
.el-checkbox__inner {
  border-radius: 4px;
  border-color: #dfe5ef;
  width: 16px;
  height: 16px;
}

.el-checkbox__inner::after {
  left: 5px;
  top: 2px;
}

.el-radio__inner {
  border-color: #dfe5ef;
}

.el-checkbox__label,
.el-radio__label {
  font-size: 14px;
  color: #5a6a85;
}

/* ════════════════════════════════════════════════════════════════
   10. 标签 = .badge（严重度 7）
   .x.x (0,2,0) 压 skin 的 6px!important/600 与 element 默认（32px/#ecf5ff）
   ════════════════════════════════════════════════════════════════ */
.el-tag.el-tag {
  border-radius: 7px !important;   /* --bs-badge-border-radius:7px */
  border: none;
  font-weight: 400;                /* --bs-badge-font-weight:400 */
  padding: 0 10px;
  height: 26px;
  line-height: 26px;
  font-size: 13px;
  background-color: #ecf2ff;
  color: #5d87ff;
}

/* 类型色置于基础规则之后，同 (0,2,0) 靠顺序覆盖 */
.el-tag.el-tag--success { background-color: #e6fffa; color: #13deb9; }
.el-tag.el-tag--warning { background-color: #fef5e5; color: #ffae1f; }
.el-tag.el-tag--danger  { background-color: #fbf2ef; color: #fa896b; }
.el-tag.el-tag--info    { background-color: #ebf3fe; color: #539bff; }

/* ════════════════════════════════════════════════════════════════
   11. 表格 = .table（严重度 7）
   ════════════════════════════════════════════════════════════════ */
.el-table {
  color: #5a6a85;
  font-size: 14px;
}

.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #ebf1f6;  /* --bs-table-border-color */
}

/* 原版 thead 白底（skin 误用 #f6f9fc）：.x.x (0,2,1) 压 (0,1,1)+!important */
.el-table.el-table th {
  background-color: #fff !important;
  color: #2a3547 !important;
  font-weight: 600 !important;
}

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

.el-table::before {
  background-color: #ebf1f6;
}

/* ════════════════════════════════════════════════════════════════
   12. Tabs = .nav-tabs（药丸式、无下划线）（严重度 7）
   ════════════════════════════════════════════════════════════════ */
.el-tabs__nav-wrap::after {
  display: none;                /* --bs-nav-tabs-border-width:0 */
}

.el-tabs__active-bar {
  display: none;
}

.el-tabs__item {
  font-size: 14px;
  color: #5a6a85;
  border-radius: 10px;          /* --bs-nav-tabs-border-radius:10px */
  padding: 0 16px;
  height: 38px;
  line-height: 38px;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.el-tabs__item:hover {
  color: #5d87ff;
}

/* .x.x.is-active (0,3,0) 压 skin 的 (0,2,0)+!important */
.el-tabs__item.el-tabs__item.is-active {
  background-color: #5d87ff !important;
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════
   13. 默认按钮 hover 用 Modernize 蓝（严重度 7）
   盖 element 的 #ecf5ff/#66b1ff/#c6e2ff
   ════════════════════════════════════════════════════════════════ */
.el-button--default:hover,
.el-button--default:focus {
  color: #5d87ff;
  border-color: #becfff;          /* --bs-primary-border-subtle */
  background-color: #ecf2ff;      /* --bs-primary-bg-subtle */
}

.el-button {
  font-weight: 500;               /* --bs-btn-font-weight:500 */
}

/* ════════════════════════════════════════════════════════════════
   14. 弹层滚动条 = simplebar 视觉（7px 细条、无轨道）（严重度 7）
   ════════════════════════════════════════════════════════════════ */
.el-select-dropdown__wrap::-webkit-scrollbar,
.el-autocomplete-suggestion__wrap::-webkit-scrollbar,
.el-cascader-menu__wrap::-webkit-scrollbar,
.el-dialog__body::-webkit-scrollbar,
.el-table__body-wrapper::-webkit-scrollbar,
.mdz-msg__list::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.el-select-dropdown__wrap::-webkit-scrollbar-thumb,
.el-autocomplete-suggestion__wrap::-webkit-scrollbar-thumb,
.el-cascader-menu__wrap::-webkit-scrollbar-thumb,
.el-dialog__body::-webkit-scrollbar-thumb,
.el-table__body-wrapper::-webkit-scrollbar-thumb,
.mdz-msg__list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);  /* simplebar thumb rgba(0,0,0,.5) × opacity .5 */
  border-radius: 7px;
}

.el-select-dropdown__wrap::-webkit-scrollbar-track,
.el-autocomplete-suggestion__wrap::-webkit-scrollbar-track,
.el-cascader-menu__wrap::-webkit-scrollbar-track,
.el-dialog__body::-webkit-scrollbar-track,
.el-table__body-wrapper::-webkit-scrollbar-track,
.mdz-msg__list::-webkit-scrollbar-track {
  background: transparent;
}

/* ════════════════════════════════════════════════════════════════
   15. 顶栏图标按钮 hover 修正（严重度 4）
   原版 .nav-icon-hover-bg:hover 是 #ecf2ff + 主色（fix.css 误用 #f6f9fc）
   .x.x:hover (0,4,0) 压 fix.css 的 (0,3,0)
   ════════════════════════════════════════════════════════════════ */
.mdz-header .nav-icon-hover-bg.nav-icon-hover-bg:hover {
  background-color: #ecf2ff;
}

.mdz-header .nav-icon-hover-bg.nav-icon-hover-bg:hover .mdz-header__icon {
  color: #5d87ff;
}

/* ════════════════════════════════════════════════════════════════
   16. 语言触发器贴近原版（严重度 8-3）：圆形按钮 + 20px 圆形旗帜、无 chevron
   .x.x (0,3,0) 压 fix.css 的 (0,2,0)
   ════════════════════════════════════════════════════════════════ */
.mdz-header .mdz-header__lang.mdz-header__lang {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.15s ease-in-out;
}

.mdz-header .mdz-header__lang.mdz-header__lang img {
  width: 20px;
  height: 20px;
}

.mdz-header .mdz-header__lang .mdz-header__caret {
  display: none;
}

.mdz-header .mdz-header__lang:hover {
  background-color: #ecf2ff;
}