/* ============================================================
   MimirDesk Admin — 蓝白配色覆盖层 v2（2026-11-01，对齐设计稿截图）
   方案：主蓝 #306EF7 + 近白侧栏 #FAFBFF + 页面底 #F6F9FE；支持暗色
   规则：
   1) 浅色规则全部收进 html:not(.dark)，暗色走 html.dark 分支 ——
      顶栏开关是 vueuse useDark，切换 <html class="dark">，
      aurora v1 的 body 前缀 !important 白底把暗色整个压死了（已修）。
   2) el-menu 组件 props 内联写死 background-color:#2d3a4b /
      text-color:#fff / active-text-color:#409eff（行内变量），
      类选择器改变量压不过行内 —— 菜单文字必须 !important 直接上色。
   3) Element Plus 的 html.dark 块把 primary 写死为 #409eff，
      因此暗色分支也要整套重申主蓝色阶。
   ============================================================ */

/* ---------- 1. 主色令牌（浅色） ---------- */
:root {
  --el-color-primary: #306EF7;
  --el-color-primary-light-3: #6E9AF9;
  --el-color-primary-light-5: #98B7FB;
  --el-color-primary-light-7: #C1D4FD;
  --el-color-primary-light-8: #D6E2FD;
  --el-color-primary-light-9: #EAF0FE;
  --el-color-primary-dark-2: #2658C6;

  /* 应用自身的主色变量（index-uvdhBUmZ.css 定义） */
  --primaryColor: #306EF7;
}

/* ---------- 1b. 主色令牌（暗色：EP 自带 html.dark 块是 #409eff，必须压回） ---------- */
html.dark {
  --el-color-primary: #306EF7;
  --el-color-primary-light-3: #214DAD;
  --el-color-primary-light-5: #18377B;
  --el-color-primary-light-7: #0E214A;
  --el-color-primary-light-8: #0A1830;
  --el-color-primary-light-9: #10203F;
  --el-color-primary-dark-2: #5B8BF9;
  --primaryColor: #306EF7;
}

/* ---------- 2. 主按钮（两态共用）：实色主蓝 ---------- */
.el-button--primary {
  background-color: #306EF7;
  border: none;
  box-shadow: 0 4px 12px rgba(48, 110, 247, .28);
}
.el-button--primary:hover,
.el-button--primary:focus {
  background-color: #4C82F8;
}
.el-button--primary:active {
  background-color: #2658C6;
}
.el-button--primary.is-plain,
.el-button--primary.is-text,
.el-button--primary.is-link {
  background: transparent;
  box-shadow: none;
}
html:not(.dark) .el-button--primary.is-plain {
  background-color: #EAF0FE;
  color: #2658C6;
}
html.dark .el-button--primary.is-plain {
  background-color: #10203F;
  color: #6E9AF9;
}

/* ---------- 3. 侧边栏（浅色：近白底深字） ----------
   ⚠️ 组件 props 内联 text-color:#fff / bg:#2d3a4b，
   文字与 hover 必须 !important，否则白底白字隐形。 */
html:not(.dark) body .scroll-sidebar,
html:not(.dark) body .scroll-sidebar[data-v-5791ad1c] {
  background-color: #FAFBFF !important;
}
html:not(.dark) body .scroll-sidebar .menus,
html:not(.dark) body .scroll-sidebar .menus[data-v-a09e873f] {
  --el-menu-bg-color: #FAFBFF !important;
  background-color: #FAFBFF !important;
  --el-menu-border-color: transparent;
  --el-menu-hover-bg-color: #F0F4FF;
}
/* :not(.is-active) —— 本规则(0,5,2)优先级高于无 html 前缀的 is-active 白字规则(0,4,1)，
   不排除的话选中项文字会被压成灰字（浅灰压浅蓝渐变＝隐形，2026-11-01 暗色实测） */
html:not(.dark) body .scroll-sidebar .menus .el-menu-item:not(.is-active),
html:not(.dark) body .scroll-sidebar .menus .el-sub-menu__title {
  color: #4E5969 !important;
}
html:not(.dark) body .scroll-sidebar .menus .el-menu-item .el-icon,
html:not(.dark) body .scroll-sidebar .menus .el-sub-menu__title .el-icon {
  color: inherit !important;
}
/* hover 同样排除选中项：否则悬停选中药丸时渐变背景/白字被本规则(0,5,2)覆盖 */
html:not(.dark) body .scroll-sidebar .menus .el-menu-item:not(.is-active):hover,
html:not(.dark) body .scroll-sidebar .menus .el-sub-menu__title:hover {
  background-color: #F0F4FF !important;
  color: #306EF7 !important;
}
html:not(.dark) body .scroll-sidebar .menus .el-sub-menu__title .el-sub-menu__icon-arrow {
  color: #8A94A6;
}
/* 展开的子菜单 & 收起态弹出菜单：props 的 background-color:#2d3a4b
   以行内样式层层带入（根 ul 之外的嵌套 ul、teleport 到 body 的弹层），
   不覆盖就是「白侧栏挂一块深蓝黑板」。 */
html:not(.dark) body .scroll-sidebar .menus .el-menu--inline,
html:not(.dark) body .el-menu--popup {
  background-color: #FAFBFF !important;
}
html:not(.dark) body .el-menu--popup .el-menu-item {
  color: #4E5969 !important;
}
html:not(.dark) body .el-menu--popup .el-menu-item .el-icon {
  color: inherit !important;
}
html:not(.dark) body .el-menu--popup .el-menu-item:hover {
  background-color: #F0F4FF !important;
  color: #306EF7 !important;
}
html:not(.dark) body .el-menu--popup .el-menu-item.is-active {
  background: linear-gradient(90deg, #3484FD 0%, #92BAFC 100%) !important;
  color: #fff !important;
}

/* ---------- 3b. 侧边栏（暗色：深蓝灰底） ---------- */
html.dark body .scroll-sidebar,
html.dark body .scroll-sidebar[data-v-5791ad1c] {
  background-color: #12161D !important;
}
html.dark body .scroll-sidebar .menus,
html.dark body .scroll-sidebar .menus[data-v-a09e873f] {
  --el-menu-bg-color: #12161D !important;
  background-color: #12161D !important;
  --el-menu-border-color: transparent;
  --el-menu-hover-bg-color: #1B2330;
}
/* :not(.is-active) 同浅色侧说明：否则选中项白字被本规则压成 #A9B4C0（隐形） */
html.dark body .scroll-sidebar .menus .el-menu-item:not(.is-active),
html.dark body .scroll-sidebar .menus .el-sub-menu__title {
  color: #A9B4C0 !important;
}
html.dark body .scroll-sidebar .menus .el-menu-item .el-icon,
html.dark body .scroll-sidebar .menus .el-sub-menu__title .el-icon {
  color: inherit !important;
}
html.dark body .scroll-sidebar .menus .el-menu-item:not(.is-active):hover,
html.dark body .scroll-sidebar .menus .el-sub-menu__title:hover {
  background-color: #1B2330 !important;
  color: #6E9AF9 !important;
}
html.dark body .scroll-sidebar .menus .el-sub-menu__title .el-sub-menu__icon-arrow {
  color: #5F6B7C;
}
/* 暗色同理：嵌套子菜单与弹出菜单整层压回深底 */
html.dark body .scroll-sidebar .menus .el-menu--inline,
html.dark body .el-menu--popup {
  background-color: #12161D !important;
}
html.dark body .el-menu--popup .el-menu-item {
  color: #A9B4C0 !important;
}
html.dark body .el-menu--popup .el-menu-item .el-icon {
  color: inherit !important;
}
html.dark body .el-menu--popup .el-menu-item:hover {
  background-color: #1B2330 !important;
  color: #6E9AF9 !important;
}
html.dark body .el-menu--popup .el-menu-item.is-active {
  background: linear-gradient(90deg, #3484FD 0%, #92BAFC 100%) !important;
  color: #fff !important;
}

/* 选中项：两种模式同款「左深右浅」渐变药丸（2026-11-01 对齐设计稿：
   渐变 #3484FD→#92BAFC 横向 + 1px 淡蓝描边圈 + 底部光晕，白字白图标） */
body .scroll-sidebar .menus .el-menu-item,
body .scroll-sidebar .menus .el-sub-menu__title {
  border-radius: 8px;
  margin: 2px 8px;
}
body .scroll-sidebar .menus .el-menu-item.is-active {
  background: linear-gradient(90deg, #3484FD 0%, #92BAFC 100%) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 0 0 1px #C8DEFF, 0 6px 14px rgba(48, 110, 247, .28);
}
body .scroll-sidebar .menus .el-menu-item.is-active .el-icon {
  color: #fff !important;
}
/* 分组标题激活态：props 内联 active-text-color:#409eff，必须压回主蓝 */
html:not(.dark) body .scroll-sidebar .menus .el-sub-menu.is-active > .el-sub-menu__title {
  color: #306EF7 !important;
}
html.dark body .scroll-sidebar .menus .el-sub-menu.is-active > .el-sub-menu__title {
  color: #6E9AF9 !important;
}

/* 展开的分组标题：蓝字 + 蓝图标 + 左侧蓝色竖条（对齐设计稿 2026-11-01；
   收起的分组保持深色。is-active ⊂ is-opened，这里用 is-opened 覆盖「展开
   但不含当前页」的分组，如设计稿中的「资产」） */
html:not(.dark) body .scroll-sidebar .menus .el-sub-menu.is-opened > .el-sub-menu__title {
  color: #306EF7 !important;
  position: relative;
}
html:not(.dark) body .scroll-sidebar .menus .el-sub-menu.is-opened > .el-sub-menu__title .el-icon:not(.el-sub-menu__icon-arrow) {
  color: #306EF7 !important;
}
html:not(.dark) body .scroll-sidebar .menus .el-sub-menu.is-opened > .el-sub-menu__title::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: #2E7DFF;
}
html.dark body .scroll-sidebar .menus .el-sub-menu.is-opened > .el-sub-menu__title {
  color: #6E9AF9 !important;
  position: relative;
}
html.dark body .scroll-sidebar .menus .el-sub-menu.is-opened > .el-sub-menu__title .el-icon:not(.el-sub-menu__icon-arrow) {
  color: #6E9AF9 !important;
}
html.dark body .scroll-sidebar .menus .el-sub-menu.is-opened > .el-sub-menu__title::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: #6E9AF9;
}

/* ---------- 4. 页面底色 / 顶栏 / 标签视图 ---------- */
html:not(.dark) body {
  background-color: #F6F9FE;
}
html.dark body {
  background-color: #101418;
}
html:not(.dark) body .app-header,
html:not(.dark) body .app-header[data-v-7221956d] {
  background-color: #FFFFFF !important;
  color: #1D2733 !important;
  border-bottom: 1px solid #E9EEF5;
}
html.dark body .app-header,
html.dark body .app-header[data-v-7221956d] {
  background-color: #14181F !important;
  color: #E5EAF3 !important;
  border-bottom: 1px solid #232B36;
}
html:not(.dark) body .app-header .setting .title,
html:not(.dark) body .app-header .setting .title[data-v-557678d5] {
  color: #1D2733 !important;
}
html.dark body .app-header .setting .title,
html.dark body .app-header .setting .title[data-v-557678d5] {
  color: #E5EAF3 !important;
}
html:not(.dark) body .app-header .el-icon {
  color: #5B6B80;
}
html.dark body .app-header .el-icon {
  color: #9AA7B8;
}
html:not(.dark) body .header-tags {
  background-color: #FFFFFF;
}
html.dark body .header-tags {
  background-color: #14181F;
}
html:not(.dark) body .header-tags .el-tabs__item.is-active {
  color: #306EF7;
}
html.dark body .header-tags .el-tabs__item.is-active {
  color: #6E9AF9;
}

/* ---------- 5. 登录页 ----------
   登录页皮肤已整体搬到 static/css/login-CH1Kl6cX.css（按 1711×919 设计稿等比还原）。
   此处不再保留任何 .login-* 规则 —— 旧规则用 body 前缀，特异性高于页面自身的
   scoped 样式，留着会把新设计覆盖掉。 */

/* ---------- 6. OAuth 回调页：同色系夜蓝（两态共用） ---------- */
body .oauth,
body .oauth[data-v-4b4bb7e4] {
  background: linear-gradient(160deg, #0C1B3A 0%, #16307A 55%, #2458D0 100%) !important;
}
body .oauth .card,
body .oauth .card[data-v-4b4bb7e4] {
  background-color: rgba(255, 255, 255, .97) !important;
  color: #1D2733 !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(7, 22, 58, .45) !important;
}
body .oauth .card .info .el-form-item__label {
  color: #1D2733 !important;
}
body .oauth .card .impt {
  color: #1D2733;
}

/* ---------- 7. 细节收敛 ---------- */
html:not(.dark) body .el-table tbody tr:hover > td {
  background-color: #F5F8FF !important;
}
html.dark body .el-table tbody tr:hover > td {
  background-color: #1B2330 !important;
}
html:not(.dark) body a,
html:not(.dark) body .el-link.el-link--primary {
  color: #2658C6;
}
html.dark body a,
html.dark body .el-link.el-link--primary {
  color: #6E9AF9;
}
body .el-pagination.is-background .el-pager li.is-active {
  background: #306EF7;
}

/* ---------- 8. 品牌块（浅色白底 / 暗色深底） ---------- */
body .app-header .header-logo {
  display: none !important;
}
html:not(.dark) body .app-header .ex-icon {
  color: #5B6B80 !important;
}
html.dark body .app-header .ex-icon {
  color: #9AA7B8 !important;
}
body .md-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 14px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 3;
  flex-shrink: 0;
}
html:not(.dark) body .md-brand {
  background: #FAFBFF;
  border-bottom: 1px solid #E9EEF5;
}
html.dark body .md-brand {
  background: #12161D;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
body .md-brand-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: block;
  flex-shrink: 0;
}
body .md-brand-t {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1.25;
}
body .md-brand-t b {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap;
}
html:not(.dark) body .md-brand-t b {
  color: #1D2733;
}
html.dark body .md-brand-t b {
  color: #E5EAF3;
}
body .md-brand-t span {
  /* 2026-10-31：左上角品牌只保留「MimirDesk」，去掉副行「API Admin」 */
  display: none;
  color: #8A94A6;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .9px;
  white-space: nowrap;
}

/* 菜单收起（64px）时：只留居中 logo */
body:has(.menus.el-menu--collapse) .md-brand {
  padding: 0;
  justify-content: center;
}
body:has(.menus.el-menu--collapse) .md-brand-t {
  display: none;
}