/* 自定义样式 */

/* 导航栏样式 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
    min-height: calc(var(--app-navbar-height) + var(--app-safe-top));
    padding-top: var(--app-safe-top);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 修复导航栏左边白块问题 */
.navbar .container {
    padding-left: 0;
    padding-right: 0;
    min-height: var(--app-navbar-height);
}

/* 防止移动端导航栏换行/撑高后遮挡主内容：
   user/base.html 的导航栏没有 .navbar-collapse 折叠结构，而 Tabler/Bootstrap 的 .navbar-nav
   在小于 lg 断点时默认竖向堆叠，会把 fixed 导航栏撑高，造成主体内容被遮挡。
   这里强制导航栏始终单行横排，空间不足时文字省略号截断。 */
.app-navbar > .container,
.app-navbar > .container-fluid {
    flex-wrap: nowrap;
}

.app-navbar .navbar-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    min-width: 0;
}

.app-navbar .navbar-nav .nav-link {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-navbar .navbar-nav .app-navbar-user {
    max-width: 32vw;
}

.app-navbar .btn,
.app-navbar .brand-logo {
    flex-shrink: 0;
}

.app-navbar .navbar-brand {
    min-width: 0;
    margin-right: 0.5rem;
}

.app-navbar .brand-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 覆盖可能导致白块的样式 */
@media (min-width: 992px) {
    :root {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* 侧边栏样式 */
.sidebar.app-sidebar {
    width: 260px;
    border-right: 1px solid var(--tblr-border-color);
}

.sidebar-light.app-sidebar {
    background-color: var(--tblr-bg-surface) !important;
}

.sidebar-dark.app-sidebar {
    background-color: var(--tblr-dark) !important;
}

.sidebar .sidebar-body {
    padding: 0.75rem;
}

.sidebar .nav {
    gap: 0.35rem;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-desktop-toggle {
    width: 2.25rem;
    height: 2.25rem;
}

.sidebar-light .nav-link {
    color: var(--tblr-body-color);
}

.sidebar-light .nav-link:hover,
.sidebar-light .nav-link.active {
    background-color: var(--tblr-primary-lt);
    color: var(--tblr-primary);
}

.sidebar-dark .nav-link {
    color: rgba(255, 255, 255, 0.82);
}

.sidebar-dark .nav-link:hover,
.sidebar-dark .nav-link.active {
    background-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* 主内容区域 */
.page-content {
    min-height: 100vh;
    margin-left: 0;
    padding-top: calc(var(--app-navbar-height) + var(--app-safe-top));
    transition: margin-left 0.2s ease;
}

/* 桌面端固定侧边栏 */
@media (min-width: 992px) {
    .sidebar.app-sidebar {
        position: fixed;
        top: calc(var(--app-navbar-height) + var(--app-safe-top));
        left: 0;
        z-index: 100;
        height: calc(100vh - (var(--app-navbar-height) + var(--app-safe-top)));
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.2s ease;
    }

    .sidebar.app-sidebar .offcanvas-body {
        display: block !important;
        height: 100%;
        overflow-y: auto;
    }

    .sidebar.app-sidebar .sidebar-sticky,
    .sidebar.app-sidebar .sidebar-body,
    .sidebar.app-sidebar .nav {
        width: 100%;
    }

    .page-content {
        margin-left: 260px;
    }

    .sidebar-desktop-collapsed .sidebar.app-sidebar {
        transform: translateX(-100%);
    }

    .sidebar-desktop-collapsed .page-content {
        margin-left: 0;
    }
}

/* 移动端交给 Bootstrap Offcanvas 控制 */
@media (max-width: 991.98px) {
    .sidebar.app-sidebar {
        top: 0;
        height: 100vh;
    }

    .page-content {
        margin-left: 0;
    }
}
.badge {
    --tblr-badge-color: #fff;
}

/* 卡片样式 */
.card {
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* 按钮样式 */
.btn {
    border-radius: 0.25rem;
}

/* 表格样式 */
.table {
    margin-bottom: 0;
}

/* 仪表盘图标 */
.icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* 加载动画 */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ==================== 全局设计令牌 ==================== */
:root {
    --app-navbar-height: 60px;
    --app-safe-top: env(safe-area-inset-top, 0px);

    /* 品牌色：靛蓝紫 Indigo Violet */
    --brand-primary: #6366f1;
    --brand-primary-dark: #4f46e5;
    --brand-primary-light: #818cf8;

    /* 中文优先字体栈（覆盖 Tabler 默认的 Inter 优先，让中文用系统黑体渲染） */
    --tblr-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

    /* A股语义色：红涨绿跌 */
    --up: #f5222d;   /* 涨 / 盈利 */
    --down: #00b578; /* 跌 / 亏损 */
}

/* ==================== 品牌主色覆盖（靛蓝紫） ==================== */
/* 同时覆盖 Tabler 的 primary 及衍生色，让按钮/链接/激活态全局换色 */
:root {
    --tblr-primary: #6366f1;
    --tblr-primary-rgb: 99, 102, 241;
    --tblr-primary-darken: #595cd9;   /* 按钮 hover 深一档 */
    --tblr-primary-lt: #eff0fe;       /* 浅色 tint（侧边栏激活底） */
    --tblr-primary-text-emphasis: #282960;
    --tblr-primary-bg-subtle: #e0e0fc;
    --tblr-primary-border-subtle: #c1c2f9;
}

[data-bs-theme="dark"] {
    /* 主色在暗色下的衍生色（浅色文字/暗色底） */
    --tblr-primary-text-emphasis: #a5b4fc;
    --tblr-primary-bg-subtle: #312e81;
    --tblr-primary-border-subtle: #4338ca;
    --tblr-primary-lt: rgba(99, 102, 241, 0.16);

    /* 暗色背景：中性炭灰（替换原蓝黑 #111827），带一点紫调以贴合靛蓝主色 */
    --tblr-body-bg: #17171f;
    --tblr-body-bg-rgb: 23, 23, 31;
    --tblr-bg-surface: #1f1f2a;
    --tblr-tertiary-bg: #262631;
    --tblr-border-color: #2d2d39;
}

/* 浅色模式显式声明 color-scheme，让滚动条/表单控件也跟随浅色 */
[data-bs-theme="light"] {
    color-scheme: light;
}

/* ==================== A股涨跌语义色 ==================== */
/* 全站盈亏统一用 .up / .down，含义不再漂移（红涨绿跌） */
.up { color: var(--up) !important; }
.down { color: var(--down) !important; }

/* ==================== 数字对齐 ==================== */
/* 金融数字等宽对齐，表格/统计卡里的收益率、价格更整齐 */
.table,
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* ==================== 品牌渐变 ==================== */
.brand-gradient {
    background: linear-gradient(135deg,
        var(--brand-primary-dark) 0%,
        var(--brand-primary) 55%,
        var(--brand-primary-light) 100%);
}

/* 品牌 Logo 图标块 */
.brand-logo {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    color: #fff;
    font-size: 1.05rem;
    background: linear-gradient(135deg,
        var(--brand-primary-dark) 0%,
        var(--brand-primary) 60%,
        var(--brand-primary-light) 100%);
    box-shadow: 0 0.125rem 0.375rem rgba(99, 102, 241, 0.4);
}

/* ==================== 导航栏（主题自适应） ==================== */
.app-navbar {
    background: var(--tblr-navbar-bg) !important;
    border-bottom: 1px solid var(--tblr-border-color) !important;
}

/* ==================== 通用次表面（主题自适应浅灰/深灰） ==================== */
.surface-tertiary {
    background: var(--tblr-tertiary-bg);
}

/* ==================== 暗色模式微调 ==================== */
[data-bs-theme="dark"] .navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: #17171f;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #4b5563;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}