/* ============================================================
   pearl-shell.css —— P2 批次：整体骨架（侧边导航 / 顶栏 / Tab 栏）
   2026-11-02 UI 改造第 5 批/共 5 批（执行顺序 P1→P3→P5→P4→P2）
   改动原因：侧边栏由深色墨蓝渐变换为浅色玻璃导航轨（参考 scaffold-master
            layout.css 的 m-rail 语汇摘取改写）；顶栏/Tab 栏同步收整。
   影响范围：仅视觉；data-perm + 内联 display:none 权限显隐链路零改动
           （本文件不对 .tab-btn 使用 display 规则，无 !important display）。
   回退：从 index.html 移除本文件 link 即整批回退。
   ============================================================ */

/* ── 侧边导航轨：回旧深墨蓝（2026-11-02 颜色回旧，仅动颜色声明） ───── */
.sidebar {
    /* 只动颜色：底/字指回旧 --sidebar-* 组（style.css :root 旧值直供）；
       下列局部变量重声明让轨内后代 var() 自动换深轨配色，结构/尺寸/圆角零改动 */
    background: var(--sidebar-bg);          /* #0B2740 旧深墨蓝 */
    color: var(--sidebar-text);             /* rgba(232,240,248,.74) */
    --text: #FFE7D3;                        /* 轨内主文字 = 旧 sidebar-text-active 明度 */
    --text-sub: rgba(232, 240, 248, .74);   /* = 旧 --sidebar-text */
    --text-light: rgba(232, 240, 248, .55);
    --text-faint: rgba(232, 240, 248, .38);
    --hover-bg: rgba(255, 255, 255, .08);   /* = 旧 --sidebar-hover */
    --surface-muted: rgba(255, 255, 255, .06);
    --border: rgba(255, 255, 255, .10);
    --border-light: rgba(255, 255, 255, .07);
    --primary: #DE7A33;                     /* 轨内强调走旧暖橙 */
    --primary-dark: #FFE7D3;
    --primary-bg: rgba(222, 122, 51, .20);  /* = 旧 --sidebar-active */
    --danger: #C0392B;
    border-right: 1px solid rgba(0, 0, 0, .18);
    box-shadow: 1px 0 0 rgba(0, 0, 0, .12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.sidebar-brand { border-bottom: 1px solid var(--border-light); }
.sidebar-brand .brand-cn {
    background: none;
    -webkit-text-fill-color: var(--text);
    color: var(--text);
}
.sidebar-brand .brand-en { color: var(--text-light); opacity: 1; }
.nav-group-title { color: var(--text-light); opacity: .85; }

.tab-btn {
    color: var(--text-sub);
    transform: none;
}
.tab-btn:hover {
    background: var(--hover-bg);
    color: var(--text);
    transform: none;
}
.tab-btn.active {
    /* 颜色回旧：深轨上的激活块 = 旧 sidebar-active 暖橙 tint（原浅色玻璃块） */
    background: var(--primary-bg);
    color: var(--primary-dark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15), inset 0 0 0 1px rgba(222, 122, 51, .35);
}
.tab-btn.active::before { background: var(--primary); }

.sidebar-footer { border-top: 1px solid var(--border-light); }
.sidebar-footer .footer-version { color: var(--text-faint); }
.footer-user { background: var(--surface-muted); }
.footer-user-name { color: var(--text); }
.footer-user-role { color: var(--text-light); }
.footer-logout-btn {
    border: 1px solid var(--border);
    color: var(--text-sub);
}
.footer-logout-btn:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ── 顶栏 ─────────────────────────────────────────────────────────── */
.app-header {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-light);
    box-shadow: none;
}
.company-name .cn { color: var(--text); }

/* ── Tab 栏（多页签，几何不变仅收整观感） ─────────────────────────── */
.content-tabs {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-light);
}
.ctab {
    background: transparent;
    border-radius: 6px 6px 0 0;
    top: 0;
    border: none;
}
.ctab:hover { background: var(--hover-bg); color: var(--text); }
.ctab.active {
    background: var(--primary-bg);
    color: var(--primary-dark);
    border: none;
    font-weight: 600;
}
.ctab.active::after {
    background: var(--primary);
    bottom: 0;
}
