/* =============================================================================
 *  后台设计系统 —— public/spa/sidebar.css
 * -----------------------------------------------------------------------------
 *  参考「客诉管理系统」的视觉与交互后，把可复用的部分落到本项目的无构建架构上。
 *
 *  为什么单独一个文件，而不是继续堆进 common.css：
 *    common.css 已经承载了业务组件样式（表格、表单、时间轴…）。
 *    这里是**框架层**（侧栏 / 顶栏 / 页面容器 / 动效），
 *    分开后调整框架观感不会牵动业务样式，反之亦然。
 *
 *  设计基线（改动请沿用，否则观感会重新变乱）：
 *    圆角     卡片 10px / 控件 8px / 品牌块 7px / 胶囊 999px
 *    间距     内容区 18–20px；区块 14–16px；卡片内 18px
 *    字号     页标题 19 / 卡片标题 15 / 正文 13–14 / 辅助 12
 *    色彩     主色 --srm-primary（后台可配）；正文 var(--srm-header-fg)；次要 var(--srm-header-fg-muted)
 *    动效     统一 .18s–.22s；只动 transform/opacity/background-color
 *             （避免动 width/height 触发重排，侧栏折叠除外——它必须动宽度）
 *    阴影     默认只有 1px 边框；hover 才给淡阴影
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 *  设计变量
 * ---------------------------------------------------------------------------
 *  ⚠️ 侧栏/顶栏/标签页的配色令牌**定义在 assets/theme.css**，
 *     本文件不再重复定义。
 *
 *     原因：之前这里自己定义了一份 --srm-aside-*，与 theme.css 形成两个来源。
 *     深色模式要在 theme.css 里覆盖这些值，如果本文件也定义一份，
 *     就会因为"后加载者胜"把深色模式的值压掉 —— 表现为"侧栏在深色下没变"。
 *     令牌统一放 theme.css，本文件只消费。
 * ------------------------------------------------------------------------ */
:root {
    --srm-ring: 0 0 0 3px;
}

/* ---------------------------------------------------------------------------
 *  1. 侧边栏
 * ---------------------------------------------------------------------------
 *  严格对照参考图 02.png（客诉管理系统）：
 *    图标单色线性 / 一级与二级文字同列对齐 / 选中整行圆角色块（无指示条）
 * ------------------------------------------------------------------------ */
.srm-aside {
    background: var(--srm-aside-bg);
    color: var(--srm-aside-fg);
    display: flex;
    flex-direction: column;
    transition: width .22s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
}

/* --- 品牌区 --- */
.srm-logo {
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-bottom: 1px solid var(--srm-aside-line);
    overflow: hidden;
    white-space: nowrap;
}
.srm-logo__badge {
    flex: 0 0 auto;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border-radius: 0;
    background: linear-gradient(135deg,
        var(--srm-primary, #409eff),
        var(--el-color-primary-light-3, #79bbff));
    color: var(--srm-on-brand);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.srm-logo__badge--wide { min-width: 34px; font-size: 13px; }
.srm-logo__text {
    color: var(--srm-aside-fg-strong);
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 菜单本体 ---
   el-menu 默认带白底与右侧边框，在深色侧栏里会露出一条亮边，必须接管。 */
.srm-aside .el-menu {
    border-right: none !important;
    background: transparent !important;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
}

/* --- 一级项 / 分组标题 ---
   参考图里两者高度、内边距、图标位置完全一致，这样整条菜单才是对齐的。

   ★ 字号按业务反馈**整体上调**（原 14px → 15px）
     业务原话："适当增加侧边栏字体大小"。调的是**菜单正文**，
     这是侧边栏里唯一需要长时间阅读的文字；二级项、页脚版本号
     按同一比例跟调（+1px / +1.5px），保持层级关系不变 ——
     只把一级项放大、二级项不动的话，两级会显得一样重，反而看不出层次。
     height 一并从 44px 提到 46px：字号变大后行高不变会显得拥挤。 */
.srm-aside .el-menu-item,
.srm-aside .el-sub-menu__title {
    height: 46px;
    line-height: 46px;
    margin: 1px 8px;
    padding-left: 14px !important;
    padding-right: 12px !important;
    border-radius: 0;
    color: var(--srm-aside-fg);
    font-size: 15px;
    transition: background-color .16s, color .16s;
}
.srm-aside .el-menu-item:hover,
.srm-aside .el-sub-menu__title:hover {
    background: var(--srm-aside-hover) !important;
    color: var(--srm-aside-fg-strong);
}

/*
 * 选中态：**后台主色实心块 + 白字**（按业务要求）。
 *
 * ★ 这一版的真正修复：不再跟 Element Plus 抢优先级，而是改它用的变量
 *
 *   现象：点击菜单项先显示蓝色，鼠标移开才变成主色。
 *
 *   根因：侧栏 <el-menu> 上绑了 backgroundColor / textColor / activeTextColor，
 *   Element Plus 会把它们**内联写成 CSS 变量**放在菜单元素上：
 *       --el-menu-active-color: #ffffff
 *       --el-menu-hover-bg-color: …
 *   内联 CSS 变量的优先级高于任何样式表规则（除非样式表也用 !important 且
 *   选择器更具体）。所以 .el-menu-item.is-active 的 background 一度被
 *   EP 自己的 hover/active 变量盖住 —— 鼠标还在项上时看到的是 EP 的默认
 *   观感（偏蓝），移开后 EP 的 hover 失效，我们的规则才露出来。
 *
 *   正确做法：**把 EP 的这几个变量改掉**，让 EP 自己就渲染成主色。
 *   这样无论 hover、focus、还是点击瞬间，颜色都来自同一个来源 ——
 *   不存在"谁盖住谁"的时序问题。同时因为变量值取自主色令牌，
 *   后台改色依然跟随。
 */
.srm-aside .el-menu {
    --el-menu-bg-color: transparent;
    --el-menu-text-color: var(--srm-aside-fg, #C9D3E0);
    --el-menu-hover-bg-color: var(--srm-aside-hover, rgba(255, 255, 255, .07));
    --el-menu-active-color: var(--srm-on-brand, #FFFFFF);
    /* EP 用这个变量画选中项底色（不同版本变量名略有差异，一并写上） */
    --el-menu-active-bg-color: var(--srm-primary, #2563EB);
    --el-menu-item-active-bg-color: var(--srm-primary, #2563EB);
}

/*
 * 选中态底色。
 *
 * 说明：EP 没有统一的"选中项底色"变量（各版本不一致），所以底色仍然由
 * 我们自己写。这里的 !important 是必要的 —— EP 的 hover 规则同样带
 * !important，而 .is-active:hover 的规则排在更后面，能稳定取胜。
 * 上面的变量已经把 activeTextColor 接管了，文字色不再依赖这里。
 */
.srm-aside .el-menu-item.is-active {
    background: var(--srm-primary, #2563EB) !important;
    color: var(--srm-on-brand, #FFFFFF) !important;
    font-weight: 500;
    position: relative;
}
/* 左侧色条：用与底不同的白，压在实心色块上仍能看清 */
.srm-aside .el-menu-item.is-active::before {
    content: '';
    position: absolute;
    left: -8px;                       /* 抵消 .el-menu-item 的 margin: 1px 8px */
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0;
    background: var(--srm-on-brand, #FFFFFF);
}
/* 图标跟随文字色（实心底上用白，不能用主色，否则同色不可见） */
.srm-aside .el-menu-item.is-active .srm-icon,
.srm-aside .el-menu-item.is-active .srm-icon-glyph {
    color: var(--srm-on-brand, #FFFFFF);
    opacity: 1;
}
/*
 * 选中项悬停：维持主色，**不做深浅变化**。
 *
 * 原先 hover 会深一档（--srm-primary-dark-2），但用户反馈"点击后先看到
 * 蓝色、移开才变主色" —— 只要有变化，就会被感知成"颜色不对"。
 * 现在保持与选中态完全一致，点下去是什么颜色，鼠标在上面就是什么颜色。
 * （选中态本来就有左侧色条 + 白字，不需要靠 hover 再强调。)
 */
.srm-aside .el-menu-item.is-active:hover,
.srm-aside .el-menu-item.is-active:focus {
    background: var(--srm-primary, #2563EB) !important;
    color: var(--srm-on-brand, #FFFFFF) !important;
}

/* --- 图标 ---
   统一尺寸与颜色，这是"看起来专业"的关键：
   emoji 字形是彩色的、各平台大小不一、基线也对不齐，整条菜单会显得杂乱。 */
.srm-aside .srm-icon {
    flex: 0 0 17px;
    width: 17px !important;
    height: 17px !important;
    color: inherit;
    opacity: .92;
}
.srm-aside .srm-icon-glyph {
    flex: 0 0 17px;
    text-align: center;
    line-height: 1;
    opacity: .92;
}
/* 子项没配图标时的小圆点：占住图标列，保持整条菜单对齐 */
.srm-menu__dot {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.srm-menu__dot::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
}
.srm-aside .el-menu-item.is-active .srm-menu__dot::before { opacity: .9; }

.srm-menu__label {
    margin-left: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.srm-aside .el-menu--collapse .srm-menu__label,
.srm-aside .el-menu--collapse .srm-menu__dot { display: none; }
/* 跟调 11 → 12px，与菜单正文的比例保持一致 */
.srm-menu__ext { margin-left: 6px; opacity: .55; font-size: 12px; }

/*
 * 待办红点（菜单项后面的数字）。
 *
 * ★ 为什么用 margin-left:auto 而不是固定间距
 *   菜单项是 flex，但每个 item 的宽度受文字长短影响。
 *   用 auto 让红点始终**贴到行的右端**，一列红点对齐成一条线；
 *   若用固定 margin，长标题会把红点挤到中间，短标题又浮在左边，
 *   整条菜单看起来会很乱。
 *
 * ★ 配色用危险色令牌（后台可配）
 *   待办=需要处理，语义上就是 danger，不是"品牌色"。
 *   深色侧栏上用实心红 + 白字，对比度足够。
 *
 * ★ 尺寸按业务反馈**调小了一档**
 *   原先是 18px 高、11px 字、最小宽 18px。在 44px 高的菜单行里
 *   那个尺寸接近"按钮"的分量，会抢菜单文字的注意力 ——
 *   红点是**提示**，不是主体。
 *   现在 16px 高、10px 字、最小宽 16px，仍然清楚可读（白字压在实心红上），
 *   但明显退到辅助层。数字超过两位仍然靠 padding 自然撑宽。
 */
.srm-menu__badge {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    /*
     * ★ 红点**保持全圆**，不参与"取消圆角"
     *
     *   本轮业务要求按钮/输入框取消圆角、走商务直角风。
     *   我最初把这里也一并归零了，但那是**误伤**：
     *   这个徽标是"待办数量"的状态点，不是控件。
     *   方形红点读起来像一个小标签，圆形才一眼看出是状态指示；
     *   而且守卫 check_sidebar_badge.js 明确断言"红点是圆角"
     *   （它同时防的正是"有人为了统一而把点改成方"）。
     *
     *   所以：控件归零，指示点/头像/进度条保持圆形 —— 这条界线见
     *   assets/theme.css 的 1.3 圆角一节。
     */
    border-radius: 9999px;
    background: var(--srm-danger, #EF4444);
    color: #fff;
    /*
     * ★ 尺寸**不跟着本次"放大字号"一起调**（保持 10px / 16px）
     *
     *   本轮业务要求"适当增加侧边栏字体大小"。我一开始把红点也从
     *   10px 加到 11px、16px 加到 17px —— 那是错的：
     *   红点此前**正因为"太大"被专门缩小过**（18px/11px → 16px/10px），
     *   我这一改等于把它改回用户已经否掉的样子（被 check_sidebar_badge 抓到）。
     *
     *   语义上也不该跟调：这次调的是**菜单正文**（需要长时间阅读的文字），
     *   红点是**提示**。正文变大、提示跟着变大，等于什么都没变 ——
     *   两者的主次对比反而被抹平。菜单行高已从 44px 提到 46px，
     *   16px 的红点在里面依然宽松。
     */
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* 收起态只显示图标，红点会让图标看起来"脏"，直接隐藏 */
.srm-aside .el-menu--collapse .srm-menu__badge { display: none; }

/* --- 二级菜单 ---
   只给 .el-menu-item 写样式是不够的：分组标题用 .el-sub-menu__title、
   内层列表是被包裹的 ul，两者默认落到 Element Plus 的亮色主题上，
   在深色侧栏里会变成"浅底浅字"，整组标题几乎看不见。下面一并接管。 */
.srm-aside .el-sub-menu .el-menu {
    background: transparent !important;
}
/*
 * 二级项：**轻微缩进**，保持与一级项同一图标列。
 * ★ 上一版我缩进了 40px 并加了一条竖线，结果文字被推得远远的、
 *   与一级项错位，看起来比参考图乱得多。参考图只是稍微缩进一档。
 */
.srm-aside .el-sub-menu .el-menu-item {
    padding-left: 26px !important;
    height: 40px;
    line-height: 40px;
    /* 二级项跟调（13.5 → 14.5），保持与一级项的层级差 */
    font-size: 14.5px;
    margin: 1px 8px;
}
/* 二级项图标略小，与文字更协调 */
.srm-aside .el-sub-menu .el-menu-item .srm-icon,
.srm-aside .el-sub-menu .el-menu-item .srm-icon-glyph,
.srm-aside .el-sub-menu .el-menu-item .srm-menu__dot {
    flex: 0 0 15px;
    width: 15px !important;
    height: 15px !important;
}
.srm-aside .el-sub-menu .el-menu-item .srm-menu__label { margin-left: 10px; }

/* 分组展开时标题提亮，让人知道当前在哪一组 */
.srm-aside .el-sub-menu.is-active > .el-sub-menu__title {
    color: var(--srm-aside-fg-strong);
}
/* 分组箭头：参考图在右侧，颜色淡一些 */
.srm-aside .el-sub-menu__icon-arrow {
    right: 12px;
    font-size: 12px;
    opacity: .55;
}

/* --- 折叠态：图标居中 --- */
.srm-aside .el-menu--collapse .el-menu-item,
.srm-aside .el-menu--collapse .el-sub-menu__title {
    margin: 1px 6px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 折叠态的弹出层（Element Plus 把 popper 挂在 body 下，需单独样式） --- */
.el-menu--popup {
    background: var(--srm-aside-bg) !important;
    border-radius: 0;
    padding: 6px 0;
    min-width: 168px;
}
.el-menu--popup .el-menu-item {
    color: var(--srm-aside-fg);
    height: 40px;
    line-height: 40px;
}
.el-menu--popup .el-menu-item:hover {
    background: var(--srm-aside-hover) !important;
    color: var(--srm-on-brand);
}
.el-menu--popup .el-menu-item.is-active {
    background: var(--srm-primary, #409eff) !important;
    color: var(--srm-on-brand) !important;
}

/* --- 侧栏底部（公司名 + 版本号）--- */
/*
 * ★ 公司名与版本号**同色**（按业务要求）
 *
 *   这里历史上改过两次、方向相反：
 *     最初公司名 78% 不透明度，压在深色侧栏上"灰得几乎看不见"；
 *     后来提亮成 --srm-aside-fg-strong（近白），版本号保持低调，想做出主次。
 *   现在业务明确要求：**公司名颜色与版本号一致**。
 *
 *   所以不再按"谁更重要"去调色：两者统一用 --srm-aside-fg、透明度也相同，
 *   底部这块就没有一明一暗的割裂感。
 *   下面把两个选择器写在**同一组规则**里，防止以后只改其中一个、颜色再次走散。
 */
.srm-aside__footer {
    flex: 0 0 auto;
    padding: 12px 18px 14px;
    border-top: 1px solid var(--srm-aside-line);
    /* 跟调 12 → 13px（菜单正文变大后这里太小会显得脱节） */
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}
.srm-aside__footer--mini { padding: 12px 0; text-align: center; }
.srm-aside__company,
.srm-aside__ver {
    color: var(--srm-aside-fg);
    opacity: .5;
}
.srm-aside__company {
    font-weight: 500;
    /* 公司名可能很长：单行省略，完整名称放 title 属性 */
    overflow: hidden;
    text-overflow: ellipsis;
}
.srm-aside__ver {
    /* 跟调 11.5 → 12.5px */
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

/* --- 自定义滚动条：深色底上默认的浅色条很刺眼 --- */
.srm-aside .el-menu::-webkit-scrollbar { width: 6px; }
.srm-aside .el-menu::-webkit-scrollbar-track { background: transparent; }
.srm-aside .el-menu::-webkit-scrollbar-thumb {
    background: var(--srm-aside-scroll);
    border-radius: 3px;
}
.srm-aside .el-menu::-webkit-scrollbar-thumb:hover { background: var(--srm-aside-scroll-hi); }

/* ---------------------------------------------------------------------------
 *  2. 顶栏
 * ------------------------------------------------------------------------ */
.srm-header {
    height: 58px;
    background: var(--srm-header-bg);
    /*
     * ★ 顶栏的下边线取消（业务要求标签行与面包屑**融为一体**）
     *
     *   顶栏里放的就是面包屑。标签行紧贴在它下面、底色也相同，
     *   中间横一条 1px 的线就把"同一块区域"又切成了两段。
     *   去掉之后两行读起来是一整块，标签像是从这一块里长出来的。
     *
     *   失去的分隔感由内容区补回来：标签行下面就是内容区，
     *   两者底色不同（--srm-header-bg vs --srm-page-bg），
     *   边界本来就看得出来。
     */
    border-bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    /* 吸顶：长页面滚动时顶栏始终可见 */
    position: sticky;
    top: 0;
    z-index: 10;
}
.srm-header__title { font-size: 16px; font-weight: 600; color: var(--srm-header-fg); }
.srm-header__sub { margin-left: 10px; font-size: 12px; font-weight: 400; color: var(--srm-header-fg-muted); }

/* 折叠按钮：hover 有底色，点击有按下反馈 */
.srm-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 0;
    color: var(--srm-header-fg-muted);
    cursor: pointer;
    transition: background-color .16s, color .16s, transform .1s;
}
.srm-collapse-btn:hover { background: var(--srm-header-hover); color: var(--srm-primary, #409eff); }
.srm-collapse-btn:active { transform: scale(.94); }

/* 顶栏右侧的用户区 */
.srm-header__user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .16s;
}
.srm-header__user:hover { background: var(--srm-header-hover); }

/* 未读铃铛的角标：贴住圆形按钮的右上边缘（默认位置在圆的外接方角上，
   看起来是飘在按钮外面，离铃铛很远） */
.srm-bell-badge .el-badge__content.is-fixed {
    top: 6px;
    right: 9px;
    border: none;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    line-height: 16px;
    border-radius: 999px;
}

/* ---------------------------------------------------------------------------
 *  3. 页面容器
 * ------------------------------------------------------------------------ */
.srm-main {
    padding: 18px 20px 28px;
    /* 内容区背景用页面底色令牌。之前这里误用了 --srm-header-hover（顶栏悬停色），
       浅色下两个值恰好接近所以看不出问题，深色下会明显不对。 */
    background: var(--srm-page-bg);
    overflow-y: auto;
}
.srm-main__inner { max-width: 1600px; margin: 0 auto; }

.srm-main::-webkit-scrollbar { width: 8px; height: 8px; }
.srm-main::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }
.srm-main::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ---------------------------------------------------------------------------
 *  3b. 顶栏：全局搜索 / 主题切换 / 通知
 * ------------------------------------------------------------------------ */

/* --- 全局搜索 ---
   收起时只是一个放大镜按钮，点击后在顶栏中间展开输入框。
   展开态用 flex:1 占满中段，避免遮住左右两侧的功能。 */
.srm-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    max-width: 420px;
    margin: 0 auto;
    min-width: 0;
}
.srm-search__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 0;
    color: var(--srm-header-fg-muted);
    cursor: pointer;
    flex: 0 0 auto;
    transition: background-color .16s, color .16s;
}
.srm-search__btn:hover { background: var(--srm-header-hover); color: var(--srm-primary); }
.srm-search__input { flex: 1 1 auto; min-width: 0; }
/* 命中的下拉结果：不要太高，超过 5 条内部滚动 */
.srm-search__hits { max-height: 320px; overflow-y: auto; }
.srm-search__hit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--srm-text);
}
.srm-search__hit:hover { background: var(--srm-hover-bg); }
.srm-search__hit-icon { color: var(--srm-text-faint); flex: 0 0 auto; display: inline-flex; }
.srm-search__hit-path { margin-left: auto; font-size: 12px; color: var(--srm-text-faint); }
.srm-search__empty { padding: 14px; text-align: center; color: var(--srm-text-faint); font-size: 13px; }

/* --- 主题切换按钮（与折叠按钮同款，视觉上成组） --- */
.srm-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 0;
    color: var(--srm-header-fg-muted);
    cursor: pointer;
    transition: background-color .16s, color .16s, transform .2s;
}
.srm-theme-btn:hover { background: var(--srm-header-hover); color: var(--srm-primary); }
.srm-theme-btn:active { transform: rotate(-20deg) scale(.94); }

/* ---------------------------------------------------------------------------
 *  4. 多标签页（Tab 栏）
 * ---------------------------------------------------------------------------
 *  设计考量（本轮按业务要求改过一次，两版差别很大，都记下来）：
 *
 *  上一版：条带用比卡片深一档的灰、标签之间画竖线、当前标签是白底+描边的卡片。
 *  本轮要求："标签行与标签的底色使用与面包屑行相同的底色，并且标签行与
 *           面包屑融为一体；当该标贴选中的时候，显示与下面页面底色相同的
 *           颜色，选中的标签与下面页面底色融为一体。"
 *
 *  所以：
 *    · 条带底色 = 面包屑所在顶栏的底色（都是 --srm-header-bg）→ 融为一体
 *    · 非当前标签：透明，露出一模一样的条带底色
 *    · 当前标签：底色 = 内容区底色（--srm-page-bg），像内容区向上长出一截
 *    · **没有**分隔线、**没有**顶部色条 —— 它们都会把"融为一体"切断
 *    · 关闭按钮平时隐藏（✕ 一直显示会让标签栏很吵），悬停或当前标签才出现
 * ------------------------------------------------------------------------ */
.srm-tabs {
    display: flex;
    align-items: center;
    height: var(--srm-tabbar-h, 40px);
    /*
     * ★ 条带底色 = 顶栏（面包屑那一行）的底色
     *
     *   业务要求："标签行与标签的底色使用与面包屑行相同的底色，
     *   并且标签行与面包屑融为一体。"
     *   两行用同一个令牌，改主题时也不会走散。
     */
    background: var(--srm-header-bg);
    /*
     * ★ 下边线取消 —— 这是"融为一体"的必要条件
     *
     *   上一版这里是 1px 的 --srm-tab-line，作用是把标签栏与内容区分开。
     *   但现在当前标签要与内容区**同色相连**，中间再横一条线
     *   就会把它拦腰截断，选中态立刻不成立。
     */
    border-bottom: 0;
    padding: 0 8px;
    gap: 0;
    /* 标签多了要能横向滚动，但不能换行 */
    overflow-x: auto;
    overflow-y: hidden;
    flex: 0 0 auto;
    scrollbar-width: none;          /* 横向滚动条隐藏，靠鼠标滚轮/触摸滑动 */
}
.srm-tabs::-webkit-scrollbar { height: 0; }

.srm-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 30px;
    padding: 0 10px;
    border-radius: 0;
    font-size: 13px;
    color: var(--srm-tab-fg);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: background-color .16s, color .16s;
}

/*
 * ★ 标签之间的竖线分隔（按业务给的 0000.png）
 *
 *   图里每个标签之间是一条浅竖线，当前标签的两侧留白使竖线自然断开 ——
 *   这就是"用 | 隔开"的观感。
 *
 *   用 ::after 画在标签右侧、而不是给每个标签加 border-right：
 *   后者会给**最后一个**也画上一条，紧邻工具区，看着像多余的一竖。
 *   配合下面两条抑制规则，两端都干净。
 */
.srm-tab::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 7px;
    bottom: 7px;
    width: 1px;
    background: var(--srm-tab-divider-bg, var(--gray-200));
    transition: opacity .15s;
}

/*
 * 当前标签自身、以及**紧邻当前标签的那一条**都不画竖线。
 *
 *   图里当前标签是一张与内容同色的卡片，两侧靠留白与相邻标签分开；
 *   如果它右边还紧跟着一条竖线，卡片与竖线之间只有 10px 的间距，
 *   看起来像"卡片被划了一刀"。
 *   同时把"当前标签左边那条"（由前一个标签的 ::after 提供）也隐掉，
 *   卡片两侧就都是干净的留白。
 */
.srm-tab:hover::after,
.srm-tab.is-active::after,
.srm-tab.is-active + .srm-tab::after { opacity: 0; }

/*
 * 悬停：比条带稍深一档，给出"可点"的反馈。
 * 用 --srm-header-hover 而不是另做一个颜色 —— 顶栏的悬停反馈就是它，
 * 同一行里的交互反馈用同一个值才连贯。
 */
.srm-tab:hover { background: var(--srm-header-hover); color: var(--srm-text); }

/*
 * ★ 当前标签：底色 = **下面内容区的底色**，且是一张"内嵌卡片"
 *
 *   业务要求（本轮，参照 0000.png）：
 *     "选中后颜色与页面底色相同，无割裂"
 *
 *   与上一版的差别只有一处，但很关键：上一版当前标签与条带**等高**
 *   （都是 30px），只是换了个底色；图里它是一张**比条带矮一点**的卡片，
 *   上下各留出一点条带底色 —— 这样"与内容区同色"才看得出来是
 *   "内容区向上长出来的一截"，而不是"条带里刷了一块别的颜色"。
 *
 *   做法：把高度收到 34px（条带 40px），并给两侧留白。
 *   上边**不画任何线**（否则与内容区的连续被切断）。
 */
.srm-tab.is-active {
    background: var(--srm-page-bg);
    color: var(--srm-tab-fg-active);
    font-weight: 600;
    box-shadow: none;
    /* 卡片比条带矮 → 上下露出条带底色，形成"内嵌"观感 */
    height: 34px;
    margin: 0 6px;
    padding: 0 12px;
}
/* 当前标签的顶部主色线：取消（原因见上） */
.srm-tab.is-active::before { display: none; }
/*
 * 关闭按钮：**常显**（按业务给的 0000.png）
 *
 * 上一版是 opacity:0 + 悬停/选中才显示，理由是"✕ 一直显示会让标签栏很吵"；
 * 但图里每个标签都带 ✕，而且常显更好用 —— 不必先悬停就能关掉页面。
 * 这里保留一条 hover 提色，作为可点反馈。
 */
.srm-tab__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 0;
    font-size: 12px;
    line-height: 1;
    color: var(--srm-text-faint);
    opacity: 1;
    transition: background-color .15s, color .15s;
}
.srm-tab__close:hover { background: var(--srm-border); color: var(--srm-danger); }

/* 标签栏右侧的固定操作区（刷新 / 关闭其他 / 关闭全部） */
.srm-tabs__tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 8px;
    position: sticky;
    right: 0;
    /* 与条带同底色（原引用 --srm-tab-bg，那个令牌已随"融合"改版移除） */
    background: var(--srm-header-bg);
}
.srm-tabs__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 0;
    color: var(--srm-header-fg-muted);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.srm-tabs__tool:hover { background: var(--srm-header-hover); color: var(--srm-primary); }

/* ---------------------------------------------------------------------------
 *  5. 页面切换过渡与骨架屏
 * ---------------------------------------------------------------------------
 *  ⚠️ 只动 opacity，**绝不要加 transform**。
 *     祖先带 transform 会成为 position:fixed 的包含块，
 *     固定定位的弹窗遮罩与右键菜单都会被裁剪
 *     （这个坑踩过两次，见 tests/check_shell_layout.js 的 E 组守卫）。
 * ------------------------------------------------------------------------ */

/* 页面内容包裹层。
   存在的意义：给 <router-view> 的内容一个稳定的父节点，
   过渡类名加在它上面，就不会去碰页面自身的根元素 .srm-page ——
   页面根元素上挂动画会波及页面内所有的 fixed 元素。 */
.srm-page-wrap { min-height: 1px; }

.srm-page-enter-active,
.srm-page-leave-active { transition: opacity .18s ease-out; }
.srm-page-enter-from,
.srm-page-leave-to { opacity: 0; }

/* 骨架屏：路由懒加载与首屏数据未就绪时占位 */
.srm-skeleton-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.srm-skeleton-card {
    background: var(--srm-card-bg);
    border: 1px solid var(--srm-border);
    border-radius: 0;
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

/* 卡片标题前的主题色竖条 —— 让"这是卡片标题"无需读文字就能分辨 */
.srm-card__title::before {
    content: '';
    flex: 0 0 auto;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--srm-primary, #409eff);
}

/*
 * ★ 这里必须覆盖 common.css 的 justify-content: space-between
 *   （业务反馈："工作台最近动态、系统状态、质量月均分、供方构成、质量缺陷分布
 *     这些文字都靠右边了，只有我的待办在左边显示正常"）
 *
 *   根因：`.srm-card__title` 在 common.css 里是
 *       display: flex; justify-content: space-between;
 *   而本文件给它加了一个 `::before`（上面那根蓝色竖条）。
 *   于是标题行有了**两个 flex 子项**：
 *       [::before 竖条]  [文字]
 *   space-between 把两者推到行的两端 —— 竖条贴最左、文字被挤到最右。
 *   这就是"文字靠右"的真正原因，跟卡片内容（图表）无关。
 *
 *   为什么只有「我的待办」看着正常：它的标题里**多了一个「全部通知」按钮**，
 *   变成三个子项（竖条 / 文字 / 按钮），文字恰好落在中间，
 *   看起来就像"左对齐"了 —— 一个巧合掩盖了全局问题。
 *
 *   修法：竖条与文字必须**紧挨着**，需要靠右的元素自己用 margin-left:auto。
 *   不删 common.css 里那条 space-between 是因为还有别处在用它的语义
 *   （标题 + 右侧操作），在源头改成 flex-start 会连带改掉那些地方的排版。
 *   这里用同优先级的后置规则覆盖，作用域仅限带竖条的标题。
 */
.srm-card__title {
    justify-content: flex-start;
    gap: 8px;
}
/* 标题行里需要贴右的元素（如「全部通知」按钮）自己声明 */
.srm-card__title > .el-button,
.srm-card__title > .srm-card__tip {
    margin-left: auto;
}

/* 整行可点击的表格：比只点"操作"列的小按钮好按得多 */
.el-table .srm-row--clickable { cursor: pointer; }
.el-table .srm-row--clickable:hover > td.el-table__cell {
    background-color: var(--el-color-primary-light-9) !important;
}
.srm-link-text { color: var(--srm-primary, #409eff); }

/* ---------------------------------------------------------------------------
 *  4. 动效
 * ------------------------------------------------------------------------ */
@keyframes srm-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.srm-anim-in { animation: srm-fade-up .26s cubic-bezier(.4, 0, .2, 1) both; }

/* 页面内容进入动效。
 *
 * ★ 只给 .srm-page（每页自己的根元素）加，**绝不要给 .srm-main__inner 加**。
 *
 *   为什么：.srm-main__inner 是所有页面共用的滚动容器。
 *   它一旦带 animation/transform，就会成为 position:fixed 的**包含块**
 *   （CSS 规范：transform 会创建包含块），于是固定定位的遮罩层不再相对视口，
 *   而是被裁进这个容器里 —— 表现就是"模态框只显示一半、底部一片空白"。
 *
 *   这个回归真实发生过（加页面动效时引入，用户直接截图反馈）。
 *   所以这里明确：
 *     · 动画只作用在 .srm-page 上（离 fixed 元素足够远）
 *     · 只动 opacity，不动 transform —— 即使将来某个 fixed 元素落在
 *       .srm-page 内，opacity 也只创建层叠上下文，不会改变 fixed 的参照物
 *     · 另外所有对话框都已显式 appendToBody: true（见 ElDialog 调用点）
 */
@keyframes srm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.srm-page { animation: srm-fade-in .2s ease-out both; }

/* KPI / 统计卡的悬浮反馈（与客诉系统一致：只抬起 1–2px） */
.srm-stat-card { transition: box-shadow .2s, transform .2s, border-color .2s; }
.srm-stat-card:hover {
    box-shadow: 0 6px 18px var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--srm-border);
}

/* 列表行进入动效：错开一点点，形成"逐条出现"的观感。
   上限 8 条 —— 再多会让人觉得页面在慢慢加载。 */
.srm-stagger > * { animation: srm-fade-up .24s cubic-bezier(.4, 0, .2, 1) both; }
.srm-stagger > *:nth-child(1) { animation-delay: .02s; }
.srm-stagger > *:nth-child(2) { animation-delay: .05s; }
.srm-stagger > *:nth-child(3) { animation-delay: .08s; }
.srm-stagger > *:nth-child(4) { animation-delay: .11s; }
.srm-stagger > *:nth-child(5) { animation-delay: .14s; }
.srm-stagger > *:nth-child(6) { animation-delay: .17s; }
.srm-stagger > *:nth-child(7) { animation-delay: .20s; }
.srm-stagger > *:nth-child(n+8) { animation-delay: .23s; }

/* 尊重系统设置：开了"减少动态效果"就全部关掉。
   前庭功能障碍用户会因动效产生不适，这不是可选的礼貌问题。 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ---------------------------------------------------------------------------
 *  5. 窄屏适配
 * ------------------------------------------------------------------------ */
@media (max-width: 1200px) {
    /* 窄屏桌面：内容区收紧，交给 JS 自动折叠侧栏 */
    .srm-main { padding: 16px; }
}