/* admin-nav-left.css —— 后台菜单从顶部横排改到左侧竖排
 *
 * 站长 2026-10-31：「后台菜单改到左边」
 *
 * 原结构（Element Plus el-tabs，实测）：
 *   .el-tabs.admin-tabs            flex / column，1564×545
 *     ├ .el-tabs__header.is-top    flex / row，h=39，margin 0 0 12px
 *     │    └ .el-tabs__nav-wrap.is-top   overflow:hidden
 *     │         ├ .el-tabs__nav-scroll   overflow:hidden
 *     │         │    └ .el-tabs__nav.is-top   flex / row，905×40
 *     │         │         └ .el-tabs__item × 10（采集任务/数据源/大牛分享/API 密钥/
 *     │         │                              评分权重/基础设置/操作日志/板块显示/
 *     │         │                              邮件通知/形态图鉴）
 *     │         └ .el-tabs__active-bar    56×2 底部滑动横线
 *     └ .el-tabs__content          1564×494
 *
 * 为什么要 !important：
 *   element-plus 的 `.el-tabs--top .el-tabs__item`、`.el-tabs__nav.is-top` 等
 *   特异性普遍在 (0,2,0)~(0,3,0)，且很多属性是行内 transform（active-bar 的位置）。
 *   本站是运行时注入、不能改源码，只能压过去。
 *
 * 为什么用 .admin-tabs 前缀限定：
 *   全站还有其它 el-tabs（若有），不能连带改掉；只作用于后台这一个。
 *
 * 为什么写在 @media (min-width: 900px)：
 *   窄屏横排反而更好用（10 项竖排要 400px 高），900 以下保持原样。
 */
@media (min-width: 900px) {

  /* ---------- 外层：横排两栏（左菜单 / 右内容） ---------- */
  .el-tabs.admin-tabs {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
  }

  /* ---------- 左栏：菜单容器做成卡片 ---------- */
  .el-tabs.admin-tabs > .el-tabs__header.is-top {
    flex: 0 0 176px !important;
    width: 176px !important;
    height: auto !important;
    /* 原 margin 是 0 0 12px（给底部留白），改成右侧留白 */
    margin: 0 18px 0 0 !important;
    padding: 8px !important;
    border: 1px solid var(--border, #243044);
    border-radius: 10px;
    background: var(--card, #141a23);
    box-sizing: border-box;
    /* 曾试过 position:sticky 让长页面（形态图鉴 pane 2584px）滚动时菜单跟住，
     * 实测无效：祖先 .adm-main 带 overflow:auto（它不是滚动容器、scrollHeight==clientHeight），
     * 但按规范它仍会成为 sticky 的包含块且永不滚动 → sticky 形同虚设。
     * 要修就得改 .adm-main 的 overflow，那是动全站后台的滚动模型，风险不值得。
     * 所以菜单固定在左上，不跟随滚动。 */
  }

  /* nav-wrap 原本 overflow:hidden + 底部那条 ::after 横线，都要去掉 */
  .el-tabs.admin-tabs > .el-tabs__header .el-tabs__nav-wrap {
    overflow: visible !important;
    padding: 0 !important;
  }
  .el-tabs.admin-tabs > .el-tabs__header .el-tabs__nav-wrap::after {
    display: none !important;
  }
  .el-tabs.admin-tabs > .el-tabs__header .el-tabs__nav-scroll {
    overflow: visible !important;
  }

  /* nav 从横向 flex 改成纵向 */
  .el-tabs.admin-tabs > .el-tabs__header .el-tabs__nav.is-top {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    border-bottom: 0 !important;
    /* element-plus 用 transform 做横向滚动位移，竖排必须清掉 */
    transform: none !important;
    white-space: normal !important;
  }

  /* ---------- 菜单项 ---------- */
  .el-tabs.admin-tabs > .el-tabs__header .el-tabs__item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: 38px !important;
    line-height: 38px !important;
    /* 原 padding 是 0 20px（首项 0 20px 0 0），竖排左右统一 12px */
    padding: 0 12px !important;
    margin: 0 0 2px 0 !important;
    box-sizing: border-box;
    border-radius: 8px;
    text-align: left !important;
    font-size: 13.5px !important;
    font-weight: 500;
    color: var(--sub, #7f8c9f);
    position: relative;
    transition: background .15s, color .15s;
  }
  .el-tabs.admin-tabs > .el-tabs__header .el-tabs__item:last-child {
    margin-bottom: 0 !important;
  }

  /* 悬停 */
  .el-tabs.admin-tabs > .el-tabs__header .el-tabs__item:hover {
    background: var(--card-2, #1a2230);
    color: var(--text, #d7e0ea);
  }

  /* 选中：底色 + 左侧竖条（替代原来底部那条横线） */
  .el-tabs.admin-tabs > .el-tabs__header .el-tabs__item.is-active {
    color: var(--primary, #f05252) !important;
    background: rgba(240, 82, 82, .13);
    font-weight: 600;
  }
  html:not(.dark) .el-tabs.admin-tabs > .el-tabs__header .el-tabs__item.is-active {
    background: rgba(240, 82, 82, .09);
  }
  .el-tabs.admin-tabs > .el-tabs__header .el-tabs__item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--primary, #f05252);
  }

  /* 选中、悬停的下划线动画（element-plus 自带的），竖排下多余 */
  .el-tabs.admin-tabs > .el-tabs__header .el-tabs__item.is-top:hover,
  .el-tabs.admin-tabs > .el-tabs__header .el-tabs__item.is-top.is-active {
    text-decoration: none;
  }

  /* ---------- 隐藏底部滑动横线与左右滚动箭头 ---------- */
  .el-tabs.admin-tabs > .el-tabs__header .el-tabs__active-bar {
    display: none !important;
  }
  .el-tabs.admin-tabs > .el-tabs__header .el-tabs__nav-prev,
  .el-tabs.admin-tabs > .el-tabs__header .el-tabs__nav-next {
    display: none !important;
  }

  /* ---------- 右侧内容区占满剩余宽度 ---------- */
  .el-tabs.admin-tabs > .el-tabs__content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

/* 窄屏（<900）保持原有横排；这里只补偿一处：
 * 横排时菜单可能超出可视宽度，element-plus 会自动出箭头，保持默认即可。 */

/* ============================================================
 * 自定义 Tab 面板的「硬隐藏」—— 与宽度无关，放在媒体查询外面
 *
 * 背景：站长反馈「先点板块显示，再点其它页面，其它页面下面会显示板块显示的内容」。
 *      板块显示是 iframe 模式（frame 高 820px），只靠 inline style 隐藏不够结实：
 *        · Vue 重渲染可能把 style 刷掉
 *        · iframe 里的 postMessage 会改 frame 高度，触发一轮 DOM 变化
 *        · 任何一轮 reconcile 晚一拍，就露出 820px 的 iframe
 *      用 !important 的类来兜：类在就一定是隐藏的，
 *      即使有人把 inline display 改回 block 也压得住（!important 优先级高于 inline 非 important）。
 * ============================================================ */
.admin-tabs .el-tab-pane.sb-pane-off {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* 再兜一层：面板被隐藏时，里面的 iframe 也不许渲染 */
.admin-tabs .el-tab-pane.sb-pane-off iframe {
  display: none !important;
}