/*
 * modernize-fix.css — Modernize styles.css（含 Bootstrap5）与 Element UI 共存的冲突修正层
 * 引入顺序：element.css → common.css → modernize styles.css → modernize-skin.css → 本文件（最后）
 */

/* Bootstrap reset 给 a 加了下划线/变色，恢复应用内链接样式 */
a {
  text-decoration: none;
}

/* Bootstrap 的 label/p/h margin 调整对 Element 表单的影响修正 */
.el-form-item label,
.el-form label {
  margin-bottom: 0;
}

p {
  margin-bottom: 0;
}

/* Bootstrap 把 button 焦点轮廓去掉后 Element 按钮仍按自身风格 */
.el-button:focus {
  outline: none;
}

/* Modernize body 背景与会员中心一致 */
body {
  background-color: #fff;
}

/* el-table 等内部 table 不受 BS table 全局影响（BS 只影响 .table 类，保险起见） */
.el-table table {
  margin-bottom: 0;
}

/* BS5 的 [hidden]/collapse 等工具类与 Vue v-show 共存：collapse 仅在我们侧栏菜单中使用 */

/* ============ Modernize 侧栏在 el-container 布局内的适配 ============ */
.mdz-sidebar.left-sidebar {
  position: relative !important;
  height: 100vh;
  min-height: 100vh;
  top: auto;
  left: auto;
  z-index: 10;
  background: #fff;
  border-right: 1px solid #e5eaef;
  box-shadow: none;
  overflow: hidden auto;
  flex-shrink: 0;
}

.mdz-sidebar .brand-logo {
  min-height: 70px;
  padding: 0 24px;
}

.mdz-sidebar__logo {
  max-height: 40px;
  max-width: 180px;
  cursor: pointer;
}

.mdz-sidebar .sidebar-nav {
  padding: 0 12px;
}

/* 菜单 iconfont 图标对齐 tabler 图标的视觉 */
.mdz-sidebar .sidebar-link .iconfont {
  font-size: 20px;
  line-height: 1;
}

/* collapse 默认隐藏 / show 展开（不依赖 bootstrap js） */
.mdz-sidebar .collapse {
  display: none;
}

.mdz-sidebar .collapse.show {
  display: block;
}

/* ============ Modernize 顶栏 mdz-header 在 el-container 布局内的适配 ============ */
/* 覆盖 common.css 的 fixed/40px 头部：改为流内、70px、白底贴顶、1px 下边框（全部 px，禁 rem） */
.el-header.mdz-header {
  position: relative;
  width: 100%;
  height: 70px !important;
  top: auto;
  padding: 0 20px;
  background: #fff;
  box-shadow: none;
  border-bottom: 1px solid #e5eaef;
  z-index: 11;
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

/* 顶栏改为流内后，主体不再需要为 fixed 头部预留 0.83rem 顶距 */
.mdz-header + .el-main {
  padding-top: 24px;
}

.mdz-header .navbar {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

/* navbar-nav 任意宽度下都保持横向（未引入 bootstrap js，无 collapse） */
.mdz-header .navbar-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mdz-header .mdz-header__left {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* nav-link 尺寸全部用 px 固定，避免 BS rem 变量被动态根字号放大 */
.mdz-header .navbar-nav .nav-link {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  color: #5a6a85;
  white-space: nowrap;
  cursor: pointer;
}

.mdz-header .navbar-nav .nav-link:hover {
  color: #5d87ff;
}

.mdz-header .navbar-nav .nav-link.active {
  color: #5d87ff;
  font-weight: 600;
}

/* 图标按钮（抽屉开关/购物车/消息）：Modernize 圆形 hover 底 */
.mdz-header .nav-icon-hover-bg {
  width: 40px;
  height: 40px;
  margin: 0 2px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease-in-out;
}

.mdz-header .nav-icon-hover-bg:hover {
  background-color: #f6f9fc;
}

.mdz-header .nav-icon-hover-bg .nav-link {
  padding: 0;
}

.mdz-header .mdz-header__icon {
  font-size: 20px;
  line-height: 1;
  color: #5a6a85;
}

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

.mdz-header .mdz-header__caret {
  font-size: 14px;
  line-height: 1;
  color: #5a6a85;
  margin-left: 4px;
}

/* 全局搜索：输入框无边框融入顶栏 */
.mdz-header .mdz-header__search {
  align-items: center;
  margin: 0 4px;
}

.mdz-header .mdz-header__search .el-input__inner {
  width: 220px;
  border: none;
  background: transparent;
  font-size: 14px;
}

/* 数量角标融入 Modernize 主色 */
.mdz-header .el-badge__content {
  background-color: #5d87ff;
  border: none;
}

.mdz-header .el-badge__content.is-fixed {
  top: 5px;
}

/* 语言切换 */
.mdz-header .mdz-header__lang {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 8px;
}

.mdz-header .mdz-header__lang img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

/* 菜单分隔 / 登录区分隔 */
.mdz-header .mdz-header__divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: #e5eaef;
  margin: 0 12px;
}

/* 未登录入口 */
.mdz-header .mdz-header__login-icon {
  font-size: 18px;
  line-height: 1;
  margin-right: 6px;
}

/* 用户区：首字母圆形头像 + 下拉 */
.mdz-header .mdz-header__user {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 4px;
}

.mdz-header .mdz-header__avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #5d87ff;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 用户下拉面板：Modernize 用户菜单卡风格（px 实现，避免 BS rem 工具类放大） */
.el-dropdown-menu.mdz-user-dd {
  padding: 0 0 8px;
  min-width: 240px;
  border: 1px solid #e5eaef;
  border-radius: 7px;
  box-shadow: rgba(145, 158, 171, 0.3) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
}

.mdz-user-dd .mdz-user-dd__profile {
  padding: 16px;
  border-bottom: 1px solid #e5eaef;
  margin-bottom: 8px;
}

.mdz-user-dd .mdz-user-dd__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #5d87ff;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mdz-user-dd .mdz-user-dd__info {
  margin-left: 12px;
  min-width: 0;
}

.mdz-user-dd .mdz-user-dd__name {
  font-size: 14px;
  font-weight: 600;
  color: #2a3547;
  line-height: 20px;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mdz-user-dd .mdz-user-dd__mail {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #5a6a85;
  line-height: 18px;
  max-width: 170px;
  overflow: hidden;
}

.mdz-user-dd .mdz-user-dd__mail .ti {
  font-size: 14px;
  margin-right: 4px;
  flex-shrink: 0;
}

.mdz-user-dd .el-dropdown-menu__item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #2a3547;
  padding: 0 16px;
  line-height: 38px;
}

.mdz-user-dd .el-dropdown-menu__item .ti {
  font-size: 18px;
  margin-right: 8px;
  color: #5a6a85;
}

.mdz-user-dd .el-dropdown-menu__item:hover {
  background: #f6f9fc;
  color: #5d87ff;
}

.mdz-user-dd .el-dropdown-menu__item:hover .ti {
  color: #5d87ff;
}

/* 消息弹层：Modernize 通知卡风格（px 实现） */
.el-popover.mdz-msg-popper {
  padding: 0;
  border: 1px solid #e5eaef;
  border-radius: 7px;
  box-shadow: rgba(145, 158, 171, 0.3) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
}

.mdz-msg {
  width: 320px;
}

.mdz-msg .mdz-msg__head {
  padding: 14px 16px;
  border-bottom: 1px solid #e5eaef;
}

.mdz-msg .mdz-msg__title {
  font-size: 15px;
  font-weight: 600;
  color: #2a3547;
}

.mdz-msg .mdz-msg__more {
  font-size: 12px;
  color: #5d87ff;
  cursor: pointer;
}

.mdz-msg .mdz-msg__list {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 0;
}

.mdz-msg .mdz-msg__item {
  padding: 10px 16px;
  cursor: pointer;
}

.mdz-msg .mdz-msg__item:hover {
  background: #f6f9fc;
}

.mdz-msg .mdz-msg__icon {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  background: #f6f9fc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.mdz-msg .mdz-msg__unread {
  color: #5d87ff;
}

.mdz-msg .mdz-msg__read {
  color: #5a6a85;
}

.mdz-msg .mdz-msg__body {
  flex: 1;
  min-width: 0;
  margin-left: 12px;
}

.mdz-msg .mdz-msg__item-title {
  font-size: 13px;
  font-weight: 500;
  color: #2a3547;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mdz-msg .mdz-msg__item-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #5a6a85;
  margin-top: 2px;
}

.mdz-msg-popper .el-empty {
  padding: 24px 0;
}

/* ============ [nav-diff] 差异1：顶栏删除横向主导航后的左区修正 ============ */
/* 左区只剩汉堡+搜索两个图标，去掉 overflow:hidden 防止搜索下拉被裁切 */
.mdz-header .mdz-header__left {
  overflow: visible;
}

/* ============ [nav-diff] 差异5：侧栏滚动收进 scroll-sidebar、24px 内距、细滚动条 ============ */
/* 覆盖上方 L49 的 overflow:hidden auto：滚动职责移交 scroll-sidebar，logo 不再跟随滚动 */
.mdz-sidebar.left-sidebar {
  width: 270px;
  overflow: visible;
}

/* 覆盖上方 padding: 0 12px → 原版 24px（87px 折叠态图标几何居中依赖 24+9px） */
.mdz-sidebar .sidebar-nav {
  padding: 0 24px;
}

.mdz-sidebar .scroll-sidebar {
  overflow-y: auto;
  height: calc(100vh - 70px); /* 无 fixed-profile，只减品牌区 */
}

/* 模拟 simplebar 细滚动条（悬停才现身） */
.mdz-sidebar .scroll-sidebar::-webkit-scrollbar {
  width: 7px;
}

.mdz-sidebar .scroll-sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 7px;
}

.mdz-sidebar .scroll-sidebar:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
}

/* ============ [nav-diff] 差异2：mini-sidebar 桌面折叠态（≥1300px） ============ */
@media (min-width: 1300px) {
  /* 折叠态：脱离 el-container 流，87px 固定列，hover 悬浮展开（对齐原版 fixed 行为） */
  body[data-sidebartype="mini-sidebar"] .mdz-sidebar.left-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 87px;
    height: 100vh;
    z-index: 50;
    transition: width 0.2s ease-in;
  }

  body[data-sidebartype="mini-sidebar"] .mdz-sidebar.left-sidebar:hover {
    width: 270px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  }

  /* 内容区让出 87px（替代原版 .page-wrapper{margin-left:87px}） */
  body[data-sidebartype="mini-sidebar"] .template > .el-container > .el-container {
    margin-left: 87px;
  }
}

/* ============ [nav-diff] 差异4：el-drawer 内 Modernize 侧栏标记（mdz-drawer） ============ */
.el-drawer.mdz-drawer {
  width: 270px !important;
  background: #fff;
  font-size: 14px;
}

/* 覆盖 common.css 的 .drawer-menu-top（3.8rem 宽）/.drawer-menu-logo（2rem 宽）rem 依赖 */
.mdz-drawer .drawer-menu-top {
  width: 100%;
  min-height: 70px;
  height: 70px;
  padding: 0 24px;
  display: flex;
  align-items: center;
}

.mdz-drawer .drawer-menu-logo {
  width: auto;
  max-width: 180px;
  max-height: 40px;
  margin: 0;
  cursor: pointer;
}

.mdz-drawer .sidebar-nav {
  padding: 0 24px;
  height: calc(100vh - 70px);
  overflow-y: auto;
}

.mdz-drawer .mdz-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* collapse 默认隐藏 / show 展开（不依赖 bootstrap js），与 .mdz-sidebar 同规则 */
.mdz-drawer .collapse {
  display: none;
}

.mdz-drawer .collapse.show {
  display: block;
}

/* ============ [nav-diff] 基础B：Bootstrap rem 工具类 px 矫正层 ============ */
/* 根字号被 common.js 动态设为 ~62-100px，BS 的 rem 工具类会爆炸式放大，这里全部钉死为 px */

/* 字阶（Modernize：fs-2=12 ... fs-9=28） */
.fs-1 { font-size: 10px !important; }
.fs-2 { font-size: 12px !important; }
.fs-3 { font-size: 14px !important; }
.fs-4 { font-size: 16px !important; }
.fs-5 { font-size: 18px !important; }
.fs-6 { font-size: 20px !important; }
.fs-7 { font-size: 22px !important; }
.fs-8 { font-size: 24px !important; }
.fs-9 { font-size: 28px !important; }

/* 间距（BS scale：1=4px 2=8px 3=16px 4=24px 5=48px） */
.p-0 { padding: 0 !important; }
.p-1 { padding: 4px !important; }
.p-2 { padding: 8px !important; }
.p-3 { padding: 16px !important; }
.p-4 { padding: 24px !important; }
.p-5 { padding: 48px !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.px-1 { padding-right: 4px !important; padding-left: 4px !important; }
.px-2 { padding-right: 8px !important; padding-left: 8px !important; }
.px-3 { padding-right: 16px !important; padding-left: 16px !important; }
.px-4 { padding-right: 24px !important; padding-left: 24px !important; }
.px-5 { padding-right: 48px !important; padding-left: 48px !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-3 { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-4 { padding-top: 24px !important; padding-bottom: 24px !important; }
.py-5 { padding-top: 48px !important; padding-bottom: 48px !important; }
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 4px !important; }
.ps-2 { padding-left: 8px !important; }
.ps-3 { padding-left: 16px !important; }
.ps-4 { padding-left: 24px !important; }
.ps-5 { padding-left: 48px !important; }
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 4px !important; }
.pe-2 { padding-right: 8px !important; }
.pe-3 { padding-right: 16px !important; }
.pe-4 { padding-right: 24px !important; }
.pe-5 { padding-right: 48px !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 4px !important; }
.pt-2 { padding-top: 8px !important; }
.pt-3 { padding-top: 16px !important; }
.pt-4 { padding-top: 24px !important; }
.pt-5 { padding-top: 48px !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 4px !important; }
.pb-2 { padding-bottom: 8px !important; }
.pb-3 { padding-bottom: 16px !important; }
.pb-4 { padding-bottom: 24px !important; }
.pb-5 { padding-bottom: 48px !important; }
.m-0 { margin: 0 !important; }
.m-1 { margin: 4px !important; }
.m-2 { margin: 8px !important; }
.m-3 { margin: 16px !important; }
.m-4 { margin: 24px !important; }
.m-5 { margin: 48px !important; }
.mx-0 { margin-right: 0 !important; margin-left: 0 !important; }
.mx-1 { margin-right: 4px !important; margin-left: 4px !important; }
.mx-2 { margin-right: 8px !important; margin-left: 8px !important; }
.mx-3 { margin-right: 16px !important; margin-left: 16px !important; }
.mx-4 { margin-right: 24px !important; margin-left: 24px !important; }
.mx-5 { margin-right: 48px !important; margin-left: 48px !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
.my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
.my-3 { margin-top: 16px !important; margin-bottom: 16px !important; }
.my-4 { margin-top: 24px !important; margin-bottom: 24px !important; }
.my-5 { margin-top: 48px !important; margin-bottom: 48px !important; }
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 4px !important; }
.ms-2 { margin-left: 8px !important; }
.ms-3 { margin-left: 16px !important; }
.ms-4 { margin-left: 24px !important; }
.ms-5 { margin-left: 48px !important; }
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 4px !important; }
.me-2 { margin-right: 8px !important; }
.me-3 { margin-right: 16px !important; }
.me-4 { margin-right: 24px !important; }
.me-5 { margin-right: 48px !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 16px !important; }
.mt-4 { margin-top: 24px !important; }
.mt-5 { margin-top: 48px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 24px !important; }
.mb-5 { margin-bottom: 48px !important; }

/* gap */
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 16px !important; }
.gap-4 { gap: 24px !important; }
.gap-5 { gap: 48px !important; }

/* 圆角（对齐 Modernize 变量：sm=5px base=7px lg=15px） */
.rounded-0 { border-radius: 0 !important; }
.rounded-1 { border-radius: 5px !important; }
.rounded-2 { border-radius: 7px !important; }
.rounded-3 { border-radius: 15px !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 800px !important; }

/* 栅格沟槽钉死 24px */
.row { --bs-gutter-x: 24px !important; }

/* 侧栏菜单配色对齐 Modernize：非激活中性灰、仅 hover/active 变色（覆盖全局 a 蓝色） */
.mdz-sidebar .sidebar-link,
.mdz-sidebar .sidebar-link .ti,
.mdz-sidebar .sidebar-link .hide-menu {
  color: #5a6a85;
}
.mdz-sidebar .sidebar-link:hover,
.mdz-sidebar .sidebar-link:hover .ti,
.mdz-sidebar .sidebar-link:hover .hide-menu {
  color: #5d87ff;
}
.mdz-sidebar .sidebar-link.active,
.mdz-sidebar .sidebar-link.active .ti,
.mdz-sidebar .sidebar-link.active .hide-menu {
  color: #ffffff !important;
}
/* 二级菜单圆点图标也跟随 */
.mdz-sidebar .first-level .sidebar-link .round-16 .ti {
  color: inherit;
}