/**
 * QY管理系统 - 主框架布局样式
 * 现代 SaaS 清爽风：冷灰底 + 浮起卡片侧栏 + 蓝主色（选中态统一主色蓝）
 */

/* ========== 基础重置 ========== */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: var(--ff-display, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif);
    background: var(--c-bg-app, #F0F2F5);
    color: var(--c-ink-1, #1B1F2A);
}

/* ========== 整体布局 ========== */
/* 应用 chrome（侧栏 + 顶部栏 + tab 栏）全部贴浏览器边缘，
 * 只让"中间内容卡片"自己留出 margin 形成浮起感（见 .qy-content-body）。 */
.qy-body {
    display: flex;
    height: 100vh;
    padding: 0;
    gap: 0;
    box-sizing: border-box;
    background: var(--c-bg-app, #F0F2F5);
}

/* ========== 侧边栏：贴左边缘，不再做浮起卡片（原本圆角+阴影是为"浮起感"，
 * 但既然要贴边，圆角和阴影都没意义，反而会在接缝处露出底色或形成假浮雕） */
.qy-side {
    width: 208px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-left: none;
    border-top: none;
    border-bottom: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 2px 0 8px rgba(15, 23, 42, 0.04);
}

/* Logo 区域（字号整体上调后，高度 56→64、logo 图 32→40） */
.qy-side .side-logo {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--c-ink-100);
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.2s;
}
.qy-side .side-logo:hover {
    background: var(--c-bg-sel);
}
/* long.png 品牌 logo：保持原图比例，轻微投影提升质感；不再用渐变 div 拼假 logo */
.qy-side .side-logo .logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 9px;
    display: block;
}
.qy-side .side-logo .logo-text {
    font-size: 17px;
    font-weight: 700;
    color: #0F172A;
    margin-left: 10px;
    letter-spacing: 1.2px;
    font-family: var(--ff-display, inherit);
    background: linear-gradient(135deg, #0F172A 0%, #006BE6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 菜单导航 */
/* 必须显式 overflow-x: hidden：只设 overflow-y: auto 时 CSS 规范会把 x 也计算成 auto，
 * 导致窄菜单因子像素误差触发横向滚动条（实际无可滚内容） */
.qy-side .side-menu {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
}
.qy-side .side-menu::-webkit-scrollbar { width: 4px; }
.qy-side .side-menu::-webkit-scrollbar-thumb {
    background: var(--c-ink-200);
    border-radius: 4px;
}

/* 覆盖 layui-nav 默认样式 */
.qy-side .layui-nav {
    background: transparent;
    padding: 0;
}
.qy-side .layui-nav .layui-nav-item {
    line-height: initial;
}
.qy-side .layui-nav .layui-nav-item a {
    color: #4B5563;
    padding: 0 12px;
    height: 38px;
    line-height: 38px;
    font-size: 15px;
    transition: background 0.2s, color 0.2s;
    border-radius: 8px;
    margin: 1px 0;
    font-weight: 500;
}
.qy-side .layui-nav .layui-nav-item a:hover {
    color: #006BE6;
    background: #EEF5FE;
}
.qy-side .layui-nav .layui-nav-item a i {
    margin-right: 8px;
    font-size: 15px;
    opacity: 0.85;
}

/* 展开的父菜单标题：Element UI 风格，和子项同字号，仅字色稍深以示层级 */
.qy-side .layui-nav .layui-nav-itemed > a {
    color: #4B5563 !important;
    font-weight: 500 !important;
    background: transparent !important;
    font-size: 15px !important;
    height: 38px !important;
    line-height: 38px !important;
    margin-top: 2px !important;
}
.qy-side .layui-nav .layui-nav-itemed > a i {
    color: #6B7280 !important;
    opacity: 0.9;
}

/* 选中态：tinted 胶囊（与子项风格一致，避免一级菜单"蹿"出来抢视觉）
 * 选中色统一到主色蓝 #006BE6：原先用的紫字 #777DE8 与冷蓝主色不同色系，
 * 紫/蓝/米三色乱炖是"旧气"来源之一，收敛到单一品牌蓝更清爽 */
.qy-side .layui-nav .layui-this,
.qy-side .layui-nav .layui-this > a,
.qy-side .layui-nav .layui-this > a:hover {
    background: #EEF5FE !important;
    color: #006BE6 !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.qy-side .layui-nav .layui-this > a i,
.qy-side .layui-nav .layui-this > a:hover i {
    opacity: 1;
    color: #006BE6 !important;
}

/* 父菜单展开时的选中态 */
.qy-side .layui-nav .layui-nav-itemed.layui-this > a {
    color: #0F172A !important;
    background: transparent !important;
    box-shadow: none !important;
}
.qy-side .layui-nav .layui-nav-itemed.layui-this > a i {
    color: #4B5563 !important;
}

/* 子菜单容器 */
.qy-side .layui-nav .layui-nav-child {
    background: transparent;
    padding: 1px 0 2px;
}
.qy-side .layui-nav .layui-nav-child dd {
    margin: 0;
    padding: 0;
}
.qy-side .layui-nav .layui-nav-child dd a {
    padding: 0 12px 0 32px !important;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #6B7280;
    margin: 1px 0 !important;
    display: block;
    border-radius: 7px !important;
    font-weight: 400;
}
.qy-side .layui-nav .layui-nav-child a:hover {
    color: #006BE6;
    background: #EEF5FE;
}

/* 子菜单选中态：tinted 胶囊（品牌淡底 + 深文字）+ 竖条，柔化但层级依然清晰
 * 之前用实心品牌渐变显得过亮过硬；改为 brand-50 底 + brand-700 字，
 * 配合更大圆角和左侧竖条 indicator，既"认得出被选中"又不刺眼 */
.qy-side .layui-nav .layui-nav-child dd.layui-this a,
.qy-side .layui-nav .layui-nav-child dd.layui-this a:hover {
    background: #EEF5FE !important;
    color: #006BE6 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    position: relative;
}
.qy-side .layui-nav .layui-nav-child dd.layui-this a i,
.qy-side .layui-nav .layui-nav-child dd.layui-this a:hover i {
    color: #006BE6 !important;
    opacity: 1 !important;
}
/* 左侧 2px 竖条 indicator：更细更收敛 */
.qy-side .layui-nav .layui-nav-child dd.layui-this a::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, #2485F0 0%, #006BE6 100%);
}

/* 隐藏 layui 默认的底部指示条 */
.qy-side .layui-nav-bar { display: none !important; }

/* ========== 右侧内容区 ========== */
/* gap 改为 0：header 和 tab 栏之间用 header 的 margin-bottom 保留 8px 呼吸；
 * tab 栏和 content-body 之间则"无缝贴合"，让 active tab 能视觉上贯穿到内容区 */
.qy-main {
    flex: 1;
    background: transparent;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 0;
    min-width: 0;
}

/* 内容顶部栏：浮起卡片（字号上调后高度 56→64）
 * 顶部贴边 + 左侧贴 sidebar + 下方贴 tab 栏：四角全部压平，和 tab 栏无缝堆叠 */
.qy-content-header {
    height: 64px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-bottom: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    flex-shrink: 0;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03),
        0 2px 10px rgba(15, 23, 42, 0.04);
}
.qy-content-header .page-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.qy-content-header .page-title {
    font-size: 16px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.3;
    letter-spacing: 0.2px;
    font-family: var(--ff-display, inherit);
}
.qy-content-header .page-desc {
    font-size: 13px;
    color: #94A3B8;
    margin-top: 2px;
    line-height: 1;
}

/* 用户信息区域 */
.qy-content-header .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 通知铃铛：随字号上调同步放大 32→36 */
.qy-content-header .header-notice {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #4B5563;
    transition: background 0.2s, color 0.2s;
    position: relative;
    background: #F2F4F7;
    border: 1px solid #E6E9EF;
}
.qy-content-header .header-notice i {
    font-size: 18px;
}
.qy-content-header .header-notice:hover {
    background: #EEF5FE;
    color: #006BE6;
    border-color: #B8D7FA;
}

/* 未读 badge：
 * - inline-flex 居中：避免 line-height 与 border 叠加导致的数字上下漂移
 * - content-box：白色描边外扩，不再吃进内圈，单/双位数都不会被压扁
 * - 18×18 起步 + 9px 圆角：单数字是正圆，"99+" 自然撑成胶囊（border-radius=½高度） */
.qy-content-header .header-notice .notice-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #E34B5F;
    color: #FFFFFF;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(227, 75, 95, 0.35);
    border: 2px solid #FFFFFF;
}

.qy-content-header .user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 3px 10px 3px 3px;
    border-radius: 999px;
    transition: background 0.2s;
    background: #F2F4F7;
    border: 1px solid #E6E9EF;
}
.qy-content-header .user-info:hover {
    background: #EEF5FE;
    border-color: #B8D7FA;
}
.qy-content-header .user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #006BE6 0%, #2485F0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow:
        0 1px 4px rgba(0, 107, 230, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.qy-content-header .user-name {
    font-size: 14px;
    color: #0F172A;
    font-weight: 600;
}

/* 下拉指示三角 */
.qy-content-header .user-info .user-caret {
    font-size: 13px;
    color: #94A3B8;
    transition: color 0.2s, transform 0.2s;
}
.qy-content-header .user-info:hover .user-caret {
    color: #006BE6;
}

/* ========== 业务 Tab 标签页栏（Element UI tags-view 风格）==========
 * 参考 https://hlltest.zhibohz.com:9081 的标签页视觉：
 *   - 白底 strip，底部细灰线和内容区分隔
 *   - inactive tab：白底 / 浅灰边 / 深灰字
 *   - active tab：浅蓝底 #ECF5FF / 蓝边 #409EFF / 蓝字 #409EFF
 *   - 胶囊体小圆角（3px），独立不与内容合并
 * 首页（.pinned）：无边框无背景，仅文字 + 图钉图标 */
/* strip：只保留底部一条灰线作为"地板"，所有 tab 都贴在这条线上；
 * align-items: flex-end 让 tab 底边=strip 底线，视觉上 tab 从上面"挂"下来并与地板接合 */
.qy-tabs {
    background: #FFFFFF;
    border: none;
    /* 上下各一条分隔：上方与 content-header 切开，下方是 tab"地板线"（active tab 底角弧与它拼合） */
    border-top: 1px solid #EBEEF5;
    border-bottom: 1px solid #EBEEF5;
    border-radius: 0;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 0 14px;
    position: relative;
}

/* 滚动容器：transform 由 JS rAF 动量模型驱动（wheel 加 velocity，每帧衰减）
 * 不用 CSS transition，否则每次 wheel 都会 restart 插值，连续滚动会顿挫
 * GPU 合成层保证无闪烁，JS 动画跑在合成器线程外但位移本身合成器应用 */
.qy-tabs-inner {
    display: inline-flex;
    align-items: flex-end;
    gap: 10px;  /* 留给底角弧度左右各 7px 的外凸空间 */
    height: 100%;
    white-space: nowrap;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* tab：只有上/左/右三边框，底部无边框（因为底边就是 strip 地板线）
 * margin-bottom: -1px 让 tab 底边覆盖 strip 的 1px 底线，二者合一 */
.qy-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 12px;
    border-radius: 7px 7px 0 0;
    background: transparent;
    border: none;
    margin-bottom: -1px;
    color: #606266;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    /* transition 包含 transform：邻居 tab 让位时用 translateX 平滑滑开（Chrome 拖拽手感） */
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), background 0.18s, color 0.18s;
    max-width: 220px;
    position: relative;
}
.qy-tab > i.layui-icon:not(.qy-tab-close):not(.qy-tab-pin) {
    font-size: 14px;
    color: #909399;
    flex-shrink: 0;
}
.qy-tab .qy-tab-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.qy-tab:hover {
    background: rgba(0, 107, 230, 0.06);
    color: #006BE6;
}
.qy-tab:hover > i.layui-icon:not(.qy-tab-close):not(.qy-tab-pin) {
    color: #006BE6;
}
/* active tab：Element UI primary 蓝配色
 * 关键：tab 底边 = strip 底线（margin-bottom: -1px 重叠），二者合一
 * 底角弧度用 ::before/::after 画"tab 竖边 → strip 横底线"的四分之一圆过渡：
 *   - 伪元素 6×6 紧贴 tab 外侧底部（left:-6 / right:-6, bottom:0）
 *   - radial-gradient 圆心在伪元素靠 tab 的那个底角
 *   - 半径 0~5：tab 主色 #ECF5FF（tab 主体"溢出"到伪元素靠 tab 一侧）
 *   - 半径 5~6：1px 蓝色圆弧（tab 边框沿四分之一圆绕下来接到 strip 底线）
 *   - 半径 6+：透明，露出 strip 白底与底线，tab 曲线边缘与 strip 地板自然交汇 */
.qy-tab.active {
    background: #D9E9FB;
    color: #006BE6;
    font-weight: 500;
    position: relative;
    z-index: 1;
}
.qy-tab.active > i.layui-icon:not(.qy-tab-close):not(.qy-tab-pin) {
    color: #006BE6;
}
/* 底角 7×7 外凸弧三角（对齐参考站 Chrome-tab 纯填充，无 border）：
 *   - 伪元素贴 tab 外侧底部（left:-7 / right:-7, bottom:0）
 *   - radial-gradient 圆心放在伪元素"远离 tab"一端的顶角，半径 7
 *   - 半径 0~7 透明：弧内是被切掉的 1/4 圆（露出 strip 白底）
 *   - 半径 7+ 填充主色 12%：弧外三角保留（实心外凸），颜色与 active tab 同
 *   - 合起来 active tab 底边向左右外凸弧三角，与 strip 底线拼合无缝 */
.qy-tab.active::before,
.qy-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 7px;
    height: 7px;
    pointer-events: none;
    z-index: 2;
}
.qy-tab.active::before {
    left: -7px;
    background: radial-gradient(
        circle at top left,
        transparent 0 7px,
        #D9E9FB 7px 100%
    );
}
.qy-tab.active::after {
    right: -7px;
    background: radial-gradient(
        circle at top right,
        transparent 0 7px,
        #D9E9FB 7px 100%
    );
}

/* 固定首页 tab：无边框无背景，仅文字 + 图钉；图钉也用中性灰 */
.qy-tab.pinned {
    background: transparent;
    border: 1px solid transparent;
    color: #606266;
    padding: 0 8px;
}
.qy-tab.pinned:hover {
    color: #006BE6;
    border-color: transparent;
    background: transparent;
}
.qy-tab.pinned.active {
    color: #006BE6;
    background: transparent;
    border-color: transparent;
}
/* pinned 不画底角外凸弧（它是透明底、无填充，弧没意义） */
.qy-tab.pinned.active::before,
.qy-tab.pinned.active::after {
    display: none;
}
.qy-tab-pin {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #909399;
    flex-shrink: 0;
    margin-left: 2px;
    transform: rotate(-25deg);
    cursor: default;
}
.qy-tab.pinned.active .qy-tab-pin {
    color: #006BE6;
}

.qy-tab-close {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    color: #909399;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    margin-left: 2px;
}
.qy-tab-close:hover {
    background: #909399;
    color: #FFFFFF;
}
.qy-tab.active .qy-tab-close {
    color: #006BE6;
}
.qy-tab.active .qy-tab-close:hover {
    background: #006BE6;
    color: #FFFFFF;
}
/* 拖拽中的 tab：跟手走（JS 写 translateX），关掉 transition 避免跟手滞后
 * 抬高 z-index 保证拖拽 tab 盖在邻居上方，轻微阴影表示"抓起"状态 */
.qy-tab.dragging {
    transition: none;
    z-index: 5;
    cursor: grabbing;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    background: rgba(0, 107, 230, 0.08);
}

/* ========== 内容容器 ========== */
/* 中间内容卡片：贴 tab 栏底部，右 / 下各 8px gap 呈现"浮起卡片"质感，
 * 因此右下角保留圆角；左 / 上已被侧栏和 tab 栏压平 */
.qy-content-body {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-top: none;
    border-radius: 0 0 12px 0;
    margin: 0 8px 8px 0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.qy-content-body #welcomePage {
    width: 100%;
    height: 100%;
}
.qy-content-body #mainIframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0 0 12px 0;
    background: transparent;
}

/* ========== 欢迎页（降级占位，实际使用 welcome.css） ========== */
.welcome-page {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: transparent;
}
.welcome-content {
    text-align: center;
}
.welcome-content .welcome-icon {
    width: 84px;
    height: 84px;
    background: linear-gradient(135deg, #EEF5FE 0%, #DCEBFC 100%);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow:
        0 2px 6px rgba(0, 107, 230, 0.08),
        0 10px 24px rgba(0, 107, 230, 0.1);
}
.welcome-content .welcome-icon i {
    font-size: 38px;
    color: #006BE6;
}
.welcome-content .welcome-title {
    font-size: 26px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    font-family: var(--ff-display, inherit);
}
.welcome-content .welcome-desc {
    font-size: 15px;
    color: #64748B;
}