/* ============================================================================
   ROBAM老板全域AI服务中台 · V5.8 设计皮肤 (theme-v59-base.css)
   ----------------------------------------------------------------------------
   V5.8 迭代主题：参照「AI SaaS 数据驾驶舱」UI 风格全面换肤
     · 全局主色：亮蓝 #2563EB（原深蓝 #0A1F44 + 金色 #C8A876 → 统一蓝色系）
     · 侧边栏：深蓝底 → 纯白底，激活菜单为蓝色渐变圆角胶囊（白字）
     · 顶栏：标题 + 欢迎副标题两行结构；新增全局搜索胶囊（复用一键查价）
     · 右上角账号胶囊：去掉下拉箭头（点击胶囊本体仍可切换角色，功能不变）
     · 登录页：深蓝夜空 → 浅蓝白渐变
   红线（本文件刻意不覆盖）：
     · K 线图（.kline-box / .period-switch / .kline-legend）与全部 Chart.js
       图表配色保持 V5.7 原样 —— 数据可视化零改动
     · 权限引擎 / 角色切换 / 数据范围逻辑零改动（仅视觉换肤）
   加载顺序：style.css → theme-v4.css → v59.css → ai-assistant.css → 本文件
   ============================================================================ */

/* ============================ 00 Design Tokens ============================ */
:root {
    /* —— 品牌主色：AI SaaS 亮蓝 —— */
    --rb-navy: #16233A;          /* 深色仅用于标题文字，不再做侧栏底色 */
    --rb-navy-deep: #0E1729;
    --rb-navy-soft: #22314E;
    --rb-blue: #333;          /* 全局主蓝 */
    --rb-blue-deep: #222;     /* 主蓝 hover/深档 */
    --rb-blue-light: #555;    /* 渐变亮档 */
    --rb-blue-soft: #EAF1FE;     /* 浅蓝底 */

    /* 原"金色"变量全部指向蓝色系：老样式引用变量处自动换肤，无需逐条改 */
    --rb-gold: #2563EB;
    --rb-gold-deep: #1D4ED8;
    --rb-gold-soft: #EFF4FF;

    /* —— 语义色 / 中性色 —— */
    --rb-bg: #F5F7FB;
    --rb-surface: #FFFFFF;
    --rb-surface-2: #F7F9FD;
    --rb-border: #E8ECF4;
    --rb-border-strong: #D9E0EC;
    --rb-text: #1B2A4A;
    --rb-text-2: #5A6B85;
    --rb-text-3: #93A0B5;

    /* —— 兼容 style.css 旧变量（登录页 / AI 球等引用处自动换肤）—— */
    --brand-primary: #2563EB;
    --brand-primary-dark: #1D4ED8;
    --brand-primary-light: #3B82F6;
    --brand-gold: #2563EB;
    --brand-gold-dark: #1D4ED8;
    --brand-accent: #3B82F6;
    --bg-primary: #F5F7FB;
    --shadow-gold: 0 8px 24px rgba(37, 99, 235, .25);
    --rb-shadow-1: 0 1px 2px rgba(23, 43, 84, .04), 0 2px 10px rgba(23, 43, 84, .05);
    --rb-shadow-2: 0 4px 16px rgba(23, 43, 84, .08);
    --rb-shadow-3: 0 16px 44px rgba(23, 43, 84, .16);
}

/* ============================ 01 侧边栏 · 恢复 V5.7 原深蓝 ============================
   V5.8 按用户反馈：左侧菜单栏保持原来的深蓝底 + 原来的点选高亮（金色渐变 + 左侧竖条），
   仅顶栏 / 账号区 / 登录页等其他部分采用新皮肤。以下规则显式写回原值。 */
.app-sidebar {
    background: linear-gradient(180deg, #0A1F44 0%, #0C2449 55%, #0A1F44 100%);
    color: #FFFFFF;
    border-right: none;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }

/* 品牌区（原样式） */
.app-sidebar .sidebar-brand { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.app-sidebar .sidebar-brand:hover { background: rgba(255, 255, 255, .04); }
.app-sidebar .brand-logo {
    box-shadow: 0 5px 16px rgba(0, 0, 0, .30), 0 0 0 2px rgba(255, 255, 255, .16);
}
.app-sidebar .brand-name { color: #FFFFFF; }
.app-sidebar .brand-sub { color: rgba(255, 255, 255, .58); }
.app-sidebar .sidebar-close { background: rgba(255, 255, 255, .12); color: #FFFFFF; }

/* 当前角色徽标（原金色调） */
.app-sidebar .menu-group {
    background: rgba(200, 168, 118, .12);
    border: 1px solid rgba(200, 168, 118, .22);
    color: #C8A876;
}
.app-sidebar .menu-group i { color: rgba(200, 168, 118, .9); }

/* 分组标题（原样式） */
.app-sidebar .menu-section { color: rgba(255, 255, 255, .42); }
.app-sidebar .menu-section:hover { color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .04); }
.app-sidebar .menu-section-label i { color: #C8A876; }
.app-sidebar .menu-caret { color: inherit; }
.app-sidebar .menu-caret.open { color: #C8A876; }

/* 菜单项：恢复原白字 + 金色图标 */
.app-sidebar .menu-item { color: rgba(255, 255, 255, .84); }
.app-sidebar .menu-item i { color: rgba(200, 168, 118, .85); }
.app-sidebar .menu-item .menu-link,
.app-sidebar .menu-item .menu-link > span { color: inherit; }
.app-sidebar .menu-item:hover { background: rgba(255, 255, 255, .07); color: #FFFFFF; }
.app-sidebar .menu-item:hover .menu-link,
.app-sidebar .menu-item:hover .menu-link > span { color: #FFFFFF; }
.app-sidebar .menu-item:hover i { color: #C8A876; }

/* 点选高亮：恢复原来的金色渐变 + 左侧金色竖条（与 V5.7 完全一致） */
.app-sidebar .menu-item.active,
.app-sidebar .menu-item.sub.active {
    background: linear-gradient(90deg, rgba(200, 168, 118, .22), rgba(200, 168, 118, .06));
    color: #FFFFFF;
    font-weight: 400;
    box-shadow: none;
}
.app-sidebar .menu-item.active .menu-link,
.app-sidebar .menu-item.active .menu-link > span { color: #FFFFFF; }
.app-sidebar .menu-item.active i { color: #C8A876; }
.app-sidebar .menu-item.active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: #C8A876;
    display: block;
}

/* 侧栏底部信息区（原样式） */
.app-sidebar .sidebar-footer { border-top: 1px solid rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .42); }
.app-sidebar .sidebar-user-name { color: rgba(255, 255, 255, .9); }
.app-sidebar .sidebar-scope i, .app-sidebar .sidebar-perm i { color: #C8A876; }
.app-sidebar .sidebar-logout {
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .78);
}
.app-sidebar .sidebar-logout:hover {
    background: rgba(255, 255, 255, .1);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, .16);
}

/* 移动端抽屉遮罩（原色调） */
.sidebar-overlay { background: rgba(6, 18, 43, .5); }

/* ============================ 02 顶栏 · 两行标题 + 搜索 ============================ */
:root { --rb-header-h: 72px; }

.app-header {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--rb-border);
}

.header-left { gap: 10px; }
.header-title-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
}
.header-page-title {
    font-size: 17px;
    color: var(--rb-text);
    line-height: 1.25;
}
/* 欢迎副标题（参考图：「欢迎回来，Admin，今天是……」） */
.header-welcome {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--rb-text-3);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 46vw;
}
.header-welcome i { color: var(--rb-blue); font-size: 10.5px; }
.header-welcome .welcome-name { color: var(--rb-blue-deep); font-weight: 400; }

/* 中部信息 chips：图标蓝化 */
.header-chip { background: var(--rb-surface-2); border-color: var(--rb-border); }
.header-chip i { color: var(--rb-blue); }
.scope-chip { background: var(--rb-blue-soft); border-color: #D9E6FF; }
.scope-chip i { color: var(--rb-blue-deep); }
.header-notice { color: var(--rb-text); }
.header-notice:hover { border-color: #BFD6FF; }

/* 全局搜索胶囊（桌面显示；点击唤起一键查价弹层） */
.header-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    width: 230px;
    margin-left: auto;
    padding: 0 12px;
    border: 1px solid var(--rb-border);
    border-radius: 999px;
    background: var(--rb-surface-2);
    color: var(--rb-text-3);
    font-size: 12.5px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
    -webkit-user-select: none; user-select: none;
    touch-action: manipulation;
}
.header-search i { color: var(--rb-blue); font-size: 13px; }
.header-search span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.header-search:hover {
    border-color: #BFD6FF;
    background: #FFFFFF;
    box-shadow: 0 2px 10px rgba(37, 99, 235, .10);
}

/* 图标按钮 */
.icon-btn { color: var(--rb-text); }
.icon-btn:hover { border-color: #BFD6FF; color: var(--rb-blue); background: var(--rb-blue-soft); }
.icon-btn.gold,
.header-search-btn-gold {
    color: var(--rb-blue);
    border-color: #D9E6FF;
    background: var(--rb-blue-soft);
}
.icon-btn.gold:hover { border-color: #BFD6FF; background: #FFFFFF; }
.menu-toggle { color: var(--rb-text); }
.menu-toggle:hover { border-color: #BFD6FF; }

/* 账号胶囊（只读 + 可点击态统一换肤） */
.account-pill { border-color: var(--rb-border); }
.account-pill-btn { pointer-events: auto; }
.account-pill-btn:hover { border-color: #BFD6FF; box-shadow: 0 2px 10px rgba(37, 99, 235, .12); }
.account-pill-btn .account-role { color: var(--rb-blue-deep); }
/* V5.8 需求：右上角角色名称不再显示向下箭头（点击胶囊本体仍可切换角色） */
.role-caret-btn,
.account-pill .fa-chevron-down { display: none !important; }

/* 角色切换下拉 */
.role-menu-dropdown { border-color: var(--rb-border); }
.role-menu-item:hover { background: var(--rb-blue-soft); }
.role-menu-item.active { background: var(--rb-blue-soft); color: var(--rb-blue-deep); }
.role-menu-item i { color: var(--rb-blue); }
.role-chip-static i { color: var(--rb-blue); }

/* V5.8 修复：theme-v4 的旧版兜底规则 `.role-menu-dropdown{display:none!important}`
   把 V5.3 角色切换下拉永久锁死（点击胶囊无反应的存量问题）。
   这里以同强度 !important 恢复打开能力，并将下拉改为 fixed 定位 ——
   顶栏 overflow:hidden 不再裁剪弹层；坐标由 base.html 的小段 UI 脚本写入。 */
.role-menu-dropdown { position: fixed; }
.role-menu.open .role-menu-dropdown { display: block !important; }

/* 顶栏在窄屏退化为单行（欢迎语隐藏，搜索框收纳） */
@media (max-width: 1280px) {
    .header-search { width: 170px; }
}
@media (max-width: 1024px) {
    .header-welcome { display: none; }
    .header-title-block { flex-direction: row; align-items: center; }
}
@media (max-width: 767px) {
    .header-search { display: none; }   /* 手机端查价入口保留在功能页内 */
    :root { --rb-header-h: 60px; }
}

/* ============================ 03 主内容 / 卡片 ============================ */
.page-title i { color: var(--rb-blue); }
.page-desc { color: var(--rb-text-2); }

/* 统计卡交互色 */
a.stat-card.stat-card-link:hover { border-color: rgba(37, 99, 235, .45); }
a.stat-card.stat-card-link:focus-visible { outline: 2px solid var(--rb-blue); outline-offset: 2px; }
.stat-card .stat-more { color: var(--rb-blue); }

/* ============================ 04 按钮 ============================ */
.btn-primary, .btn-primary-solid {
    background: linear-gradient(135deg, var(--rb-blue-light), var(--rb-blue));
    box-shadow: 0 2px 10px rgba(37, 99, 235, .26);
}
.btn-primary:hover, .btn-primary-solid:hover { box-shadow: 0 6px 18px rgba(37, 99, 235, .34); }
.btn-gold {
    background: linear-gradient(135deg, var(--rb-blue-light), var(--rb-blue-deep));
    box-shadow: 0 2px 10px rgba(37, 99, 235, .26);
}
.btn-outline:hover { border-color: var(--rb-blue); color: var(--rb-blue); }
.menu-toggle:hover { border-color: #BFD6FF; }

/* 分页 / 选中态（原金色高亮 → 蓝） */
.mv-sort .btn.is-active {
    background: var(--rb-blue-soft);
    border-color: #BFD6FF;
    color: var(--rb-blue-deep);
}

/* ============================ 05 HR 等模块写死金色的收口 ============================ */
.hr-kpi-link:hover { border-color: var(--rb-blue); }
.hr-drop:hover, .hr-drop.dragging { border-color: var(--rb-blue); background: rgba(37, 99, 235, .05); }
.hr-drop-icon { color: var(--rb-blue); }
.hr-field input:focus, .hr-field select:focus, .hr-field textarea:focus {
    border-color: var(--rb-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.hr-result-summary { background: rgba(37, 99, 235, .06); border-left-color: var(--rb-blue); }
.hr-rc-head i { color: var(--rb-blue); }
.hr-rc-list li::before { background: var(--rb-blue); }
.v53-detail-head i { color: var(--rb-blue); }
.v53-tag-gold { border-color: rgba(37, 99, 235, .35); }
.v53-note.gold { border-color: rgba(37, 99, 235, .35); }
.v53-pager button:hover:not(:disabled) { border-color: var(--rb-blue); color: var(--rb-blue); }
.v53-role-card.active { border-color: var(--rb-blue); background: var(--rb-blue-soft); }
.v53-tree-node i.node-icon { color: var(--rb-blue); }
.v53-tree-toggle:hover { color: var(--rb-blue); }
.v53-bar-fill { background: linear-gradient(90deg, var(--rb-blue-light), var(--rb-blue)); }

/* ============================ 06 登录页 · 浅蓝白 ============================ */
.login-container,
.auth-wrap, .auth-container {
    background:
        radial-gradient(1000px 620px at 12% -8%, rgba(37, 99, 235, .12), transparent 60%),
        radial-gradient(900px 560px at 100% 108%, rgba(59, 130, 246, .14), transparent 62%),
        linear-gradient(160deg, #EAF2FF 0%, #F7FAFF 46%, #DCE9FF 100%);
}
.login-container::before {
    background:
        radial-gradient(circle at 18% 26%, rgba(37, 99, 235, .12), transparent 46%),
        radial-gradient(circle at 82% 74%, rgba(59, 130, 246, .14), transparent 50%);
}
.login-container::after {
    background-image:
        linear-gradient(rgba(37, 99, 235, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, .05) 1px, transparent 1px);
}
.btn-login {
    background: linear-gradient(135deg, var(--rb-blue-light), var(--rb-blue));
    letter-spacing: 6px;
}
.btn-login:hover { box-shadow: 0 12px 28px rgba(37, 99, 235, .35); }

/* ============================ 07 AI 助手浮球 ============================ */
.ai-fab {
    background: linear-gradient(135deg, #0A1F44 0%, #12356B 60%, #1B4A8F 100%) !important;
    box-shadow: 0 8px 22px rgba(10, 31, 68, .38) !important;
}
.ai-fab:hover { box-shadow: 0 12px 28px rgba(10, 31, 68, .46) !important; }

/* ============================ 08 焦点可达性 ============================ */
a, button, .btn, .menu-item, .icon-btn, .header-chip, .account-pill-btn {
    outline-color: var(--rb-blue);
}