/* ==========================================================================
   BiNodes 全局毛玻璃亮色主题（Glassmorphism Light Theme）
   --------------------------------------------------------------------------
   设计目标：明亮、通透、大气；桌面与移动端一致的舒适观感。
   加载顺序：必须在 style.css / index.css 之后引入，以覆盖默认主题。
   维护约定：仅通过本文件调整全局视觉风格；页面级个性样式仍放各自 css。
   ========================================================================== */

:root {
    /* 主色与渐变 */
    --glass-primary: #3461ff;
    --glass-primary-soft: #6a9bff;
    --glass-gradient: linear-gradient(135deg, #5b8cff 0%, #3461ff 100%);

    /* 玻璃面 */
    /* 性能说明：内容区卡片一律使用「半透明白 + 高光描边 + 柔和阴影」模拟毛玻璃质感，
       不使用 backdrop-filter —— 卡片会随页面滚动移动，模糊需要逐帧重新采样背景，
       页面卡片一多就会明显掉帧。真实模糊只保留给顶栏、下拉菜单和弹窗等小面积/瞬时元素。 */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-bg-strong: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(255, 255, 255, 0.9);
    --glass-blur: 16px;

    /* 圆角与阴影 */
    --glass-radius: 18px;
    --glass-radius-sm: 12px;
    --glass-shadow: 0 8px 32px rgba(52, 97, 255, 0.08), 0 2px 8px rgba(31, 45, 61, 0.05);
    --glass-shadow-hover: 0 14px 40px rgba(52, 97, 255, 0.14), 0 4px 12px rgba(31, 45, 61, 0.06);

    /* 文字 */
    --glass-text: #2b3440;
    --glass-text-muted: #7a869a;
}

/* ---------- 全局背景：明亮渐变 + 柔和光斑 ---------- */
/* 性能说明：不使用 background-attachment: fixed（该属性会让背景在滚动时反复重绘，
   是典型的滚动卡顿来源），背景与光斑统一交给 fixed 定位的伪元素承担，
   伪元素由合成器直接复用，不随滚动重绘。 */
body {
    color: var(--glass-text);
    background-color: #f2f6fd;
}

/* 背景渐变 + 光斑装饰：整体固定，不随滚动重绘 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38rem 38rem at 12% -6%, rgba(91, 140, 255, 0.16), transparent 60%),
        radial-gradient(32rem 32rem at 96% 18%, rgba(155, 129, 255, 0.12), transparent 60%),
        radial-gradient(36rem 36rem at 78% 96%, rgba(255, 176, 136, 0.10), transparent 60%),
        linear-gradient(160deg, #eef3fc 0%, #f6f9ff 45%, #fdf6f4 100%);
}

h1, h2, h3, h4, h5, h6 {
    color: #1f2d3d;
}

::selection {
    background: rgba(52, 97, 255, 0.18);
}

/* ---------- 通用玻璃面工具类（页面可直接复用） ---------- */
.glass-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
}

/* ---------- 顶栏 ---------- */
/* 顶栏下方有内容滚动，保留轻量毛玻璃；模糊半径取小值并提高不透明度以降低滚动开销 */
.top-header .navbar {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 24px rgba(52, 97, 255, 0.07);
}

.top-header .navbar .searchbar .form-control {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    box-shadow: inset 0 1px 3px rgba(31, 45, 61, 0.04);
    transition: box-shadow .2s, border-color .2s;
}

.top-header .navbar .searchbar .form-control:focus {
    background: #ffffff;
    border-color: rgba(52, 97, 255, 0.55);
    box-shadow: 0 0 0 .25rem rgba(52, 97, 255, 0.12);
}

/* ---------- 侧边栏 ---------- */
/* 性能说明：侧边栏是常驻大面板，且内部菜单会展开/滚动，使用 backdrop-filter 会导致
   每帧重新采样模糊背景（菜单操作明显卡顿）。此处用不模糊的明亮半透明渐变面板替代，
   视觉上与毛玻璃主题保持一致，同时消除合成开销。 */
.sidebar-wrapper {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 250, 255, 0.94) 100%);
    border-right: 1px solid rgba(31, 45, 61, 0.06);
    box-shadow: 4px 0 24px rgba(52, 97, 255, 0.06);
    /* 折叠时只过渡宽度，避免 `all` 连带过渡阴影/圆角造成额外重绘 */
    transition: width .2s ease;
}

.sidebar-wrapper .sidebar-header {
    background: transparent;
    border-right: 0;
    border-bottom: 1px solid rgba(31, 45, 61, 0.06);
    transition: width .2s ease;
}

.sidebar-wrapper .metismenu a {
    border-radius: var(--glass-radius-sm);
    border-left: 4px solid transparent;
    color: #55617a;
    /* 收窄过渡属性，避免 `all` 触发不必要的重排/重绘 */
    transition: background-color .18s ease-out, color .18s ease-out, box-shadow .18s ease-out;
}

.sidebar-wrapper .metismenu ul a {
    border-left: 4px solid transparent;
}

/* 选中/悬停：品牌蓝渐变胶囊，视觉统一大气 */
.sidebar-wrapper .metismenu .mm-active > a,
.sidebar-wrapper .metismenu a:active,
.sidebar-wrapper .metismenu a:focus {
    color: #ffffff;
    background: var(--glass-gradient);
    border-left: 4px solid transparent;
    box-shadow: 0 6px 18px rgba(52, 97, 255, 0.32);
}

.sidebar-wrapper .metismenu a:hover {
    color: var(--glass-primary);
    background: rgba(255, 255, 255, 0.85);
    border-left: 4px solid transparent;
    box-shadow: 0 4px 14px rgba(52, 97, 255, 0.12);
}

/* 展开中的父级菜单保持渐变胶囊，子菜单项用浅蓝底区分 */
.sidebar-wrapper .metismenu ul .mm-active > a,
.sidebar-wrapper .metismenu ul a:hover,
.sidebar-wrapper .metismenu ul a:focus {
    color: var(--glass-primary);
    background: rgba(52, 97, 255, 0.10);
    box-shadow: none;
}

.menu-label {
    color: var(--glass-text-muted);
}

/* ---------- 卡片 ---------- */
.card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    transition: box-shadow .25s ease, transform .25s ease;
}

.card:hover {
    box-shadow: var(--glass-shadow-hover);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid rgba(31, 45, 61, 0.06);
    border-radius: var(--glass-radius) var(--glass-radius) 0 0 !important;
    font-weight: 600;
}

.card-footer {
    background: transparent;
    border-top: 1px solid rgba(31, 45, 61, 0.06);
}

/* ---------- 表格（含 bootstrap-table） ---------- */
.table {
    --bs-table-bg: transparent;
    background: transparent;
    color: var(--glass-text);
}

.table > :not(caption) > * > * {
    background: transparent;
    border-bottom-color: rgba(31, 45, 61, 0.06);
}

.table thead th,
.fixed-table-container .table thead th {
    color: var(--glass-text-muted);
    font-weight: 600;
    border-bottom: 1px solid rgba(31, 45, 61, 0.10);
    background: rgba(255, 255, 255, 0.35);
}

.table-hover tbody tr:hover,
.fixed-table-container .table-hover tbody tr:hover {
    background: rgba(52, 97, 255, 0.05);
}

.fixed-table-container,
.bootstrap-table .fixed-table-container {
    background: transparent;
    border: 0;
}

/* ---------- 按钮 ---------- */
.btn {
    border-radius: 10px;
    transition: box-shadow .2s, transform .15s, background .2s, color .2s;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--glass-gradient);
    border: 0;
    box-shadow: 0 4px 14px rgba(52, 97, 255, 0.30);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #6a9bff 0%, #2f56e8 100%);
    box-shadow: 0 6px 20px rgba(52, 97, 255, 0.40);
}

.btn-outline-primary {
    border-color: rgba(52, 97, 255, 0.45);
    color: var(--glass-primary);
    background: rgba(255, 255, 255, 0.55);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--glass-gradient);
    border-color: transparent;
    color: #ffffff;
}

.btn-light,
.btn-white {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
}

/* ---------- 表单控件 ---------- */
.form-control,
.form-select {
    background-color: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(31, 45, 61, 0.10);
    border-radius: 10px;
    color: var(--glass-text);
}

.form-control:focus,
.form-select:focus {
    background-color: #ffffff;
    border-color: rgba(52, 97, 255, 0.55);
    box-shadow: 0 0 0 .25rem rgba(52, 97, 255, 0.12);
}

.input-group-text {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(31, 45, 61, 0.10);
}

/* ---------- 下拉 / 弹窗 ---------- */
/* 下拉菜单需要承载文字表单，透明度不能过高，否则文字与页面背景混在一起难以辨认 */
.dropdown-menu {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(31, 45, 61, 0.08);
    border-radius: var(--glass-radius-sm);
    box-shadow: 0 16px 40px rgba(31, 45, 61, 0.16), 0 4px 12px rgba(52, 97, 255, 0.08);
    color: var(--glass-text);
}

.dropdown-menu .dropdown-item {
    color: #3c4a5e;
}

/* 设置面板内的小标题/说明文字：提高对比度，避免看不清 */
.dropdown-menu .text-muted,
.dropdown-menu small {
    color: #64748b !important;
}

.dropdown-menu .dropdown-divider {
    border-top-color: rgba(31, 45, 61, 0.08);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(52, 97, 255, 0.10);
    color: var(--glass-primary);
}

.modal-content {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow-hover);
}

.modal-header {
    border-bottom-color: rgba(31, 45, 61, 0.08);
}

.modal-footer {
    border-top-color: rgba(31, 45, 61, 0.08);
}

/* ---------- 徽章 / 分页 / 面包屑 ---------- */
.badge {
    border-radius: 999px;
    font-weight: 600;
}

.pagination .page-link {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(31, 45, 61, 0.08);
    color: var(--glass-primary);
    border-radius: 8px;
    margin: 0 2px;
}

.pagination .page-item.active .page-link {
    background: var(--glass-gradient);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(52, 97, 255, 0.30);
}

.breadcrumb {
    background: transparent;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: rgba(52, 97, 255, 0.25);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(52, 97, 255, 0.45);
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- 兼容与降级 ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* 不支持真实模糊的浏览器，用更高不透明度的浅色面替代顶栏/下拉/弹窗的毛玻璃 */
    .top-header .navbar,
    .dropdown-menu,
    .modal-content {
        background: rgba(255, 255, 255, 0.94);
    }
}

/* ---------- 移动端优化：降低模糊半径以保护滚动性能 ---------- */
@media (max-width: 767px) {
    :root {
        --glass-blur: 10px;
        --glass-radius: 14px;
    }

    body::before {
        background:
            radial-gradient(24rem 24rem at 8% -4%, rgba(91, 140, 255, 0.14), transparent 60%),
            radial-gradient(22rem 22rem at 100% 90%, rgba(255, 176, 136, 0.10), transparent 60%);
    }
}

/* ==========================================================================
   Finder / 数据页通用组件（metrics-card、标题、Tab、筛选器）
   以上类均定义于 index.css，此处统一升级为毛玻璃风格，全部 finder 页面复用
   ========================================================================== */

/* 数据卡片：玻璃面 + 舒适内边距 */
.metrics-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    padding: 1.25rem;
    transition: box-shadow .25s ease, transform .25s ease;
}

.metrics-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow-hover);
}

.metrics-card hr {
    border-color: rgba(31, 45, 61, 0.06);
    opacity: 1;
}

/* 区块标题：左侧渐变 accent 条 + 极浅分隔线，替代原来的重底边 */
.data-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2d3d;
    border-bottom: 1px solid rgba(31, 45, 61, 0.06);
    padding: 0.25rem 0.25rem 0.75rem 0.85rem;
    margin: 0 0 0.75rem 0;
    position: relative;
}

.data-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    bottom: 0.85rem;
    width: 4px;
    border-radius: 999px;
    background: var(--glass-gradient);
}

/* 键值展示：标签品牌蓝、值用深色提升可读性 */
.font-bule-title {
    color: var(--glass-primary) !important;
}

.font-bule-content {
    color: #33475e !important;
}

/* 通用小徽章：柔和蓝灰胶囊 */
.badge_gray {
    color: #3d5a9e !important;
    background-color: rgba(52, 97, 255, 0.08) !important;
    backdrop-filter: none; /* 小元素不再叠加模糊，保护渲染性能 */
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(52, 97, 255, 0.12);
    border-radius: 999px;
}

/* Tab 切换：胶囊式选中态 */
.tab-container {
    border-bottom: 0;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
}

.tab-btn {
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    color: var(--glass-text-muted);
}

.tab-btn:hover {
    color: var(--glass-primary);
    background: rgba(255, 255, 255, 0.75);
}

.tab-btn.active {
    color: #ffffff;
    background: var(--glass-gradient);
    box-shadow: 0 4px 14px rgba(52, 97, 255, 0.30);
}

.tab-btn.active::after {
    display: none; /* 胶囊样式下不再需要底部指示条 */
}

/* 周期/状态筛选按钮：玻璃胶囊组 */
.square-filter,
.btn-modern {
    border: 1px solid rgba(31, 45, 61, 0.10);
    background: rgba(255, 255, 255, 0.65);
    color: #55617a;
    border-radius: 999px;
}

.square-filter:hover:not(.active),
.btn-modern:hover:not(.active) {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(52, 97, 255, 0.35);
    color: var(--glass-primary);
}

.square-filter.active,
.btn-modern.active {
    background: var(--glass-gradient);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(52, 97, 255, 0.30);
}

/* 链接悬停与品牌色统一 */
.link-sm {
    color: var(--glass-primary) !important;
}

.link-sm:hover {
    color: #1f3fa8 !important;
}

/* 图表容器：玻璃面（burn、dashboard 等页面共用） */
.chart-container {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    padding: 1rem;
}

/* 燃烧页等 KPI 指标卡：bg-white + rounded-xl 组合升级为玻璃面 */
.metrics-section .bg-white.rounded-xl {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius) !important;
    box-shadow: var(--glass-shadow) !important;
}