/* ==========================================================================
 * 小星星 · 后台设计系统 (Design System v2)
 * ------------------------------------------------------------------
 * 灵感：Stripe Dashboard（信息密度）+ Linear（深色层级）+ Telegram 官方蓝
 * 原则：
 *   - 2 主色 + 3 语义色 + 中性 slate scale，绝不花花绿绿
 *   - 字号 / 间距 / 圆角 / 阴影 全部走 token
 *   - 不破坏 Dcat Admin DOM 结构，仅在其上做视觉增强
 *   - 深 / 浅色主题同时可用（rgba + currentColor + hsl 变量）
 * ========================================================================== */

:root {
    /* —— 品牌主色 · Telegram 官方 —— */
    --tg-primary: 199 71% 49%;
    /* #229ED9 */
    --tg-glow: 199 71% 55%;
    /* #37AEE2 */
    --tg-deep: 199 74% 45%;
    /* #1E96C8 */

    /* —— 语义色（仅在表达状态/涨跌时使用） —— */
    --sem-success: 159 64% 52%;
    /* #34D399 */
    --sem-danger: 0 91% 71%;
    /* #F87171 */
    --sem-warn: 38 92% 50%;
    /* #F59E0B */

    /* —— 中性（深 / 浅通用的 rgba 形态） —— */
    --ink-1: rgba(148, 163, 184, 0.04);
    --ink-2: rgba(148, 163, 184, 0.08);
    --ink-3: rgba(148, 163, 184, 0.14);
    --ink-4: rgba(148, 163, 184, 0.22);
    --ink-5: rgba(148, 163, 184, 0.38);

    /* —— 尺度 —— */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 10px;
    --r-xl: 14px;

    --fz-xs: 11.5px;
    --fz-sm: 12.5px;
    --fz-md: 13px;
    --fz-lg: 14px;
    --fz-xl: 17px;

    /* —— 阴影与渐变 —— */
    --shadow-soft: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 1px rgba(15, 23, 42, .03);
    --shadow-card: 0 4px 14px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .04);
    --shadow-pop: 0 10px 32px rgba(15, 23, 42, .18);
    --shadow-glow: 0 8px 24px hsl(var(--tg-primary) / .22);

    --grad-primary: linear-gradient(135deg, hsl(var(--tg-primary)), hsl(var(--tg-glow)));
    --grad-soft: linear-gradient(135deg, hsl(var(--tg-primary) / .10), hsl(var(--tg-glow) / .02));

    /* —— 过渡 —— */
    --t-fast: all .15s ease;
    --t-smooth: all .22s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
 * 1. 卡片 & 盒子：柔和圆角 + 清晰边界
 * ========================================================================== */
.card,
.box {
    border-radius: var(--r-md) !important;
    border: 1px solid var(--ink-3) !important;
    box-shadow: var(--shadow-soft) !important;
    transition: var(--t-smooth);
}

.card:hover,
.box:hover {
    box-shadow: var(--shadow-card) !important;
    border-color: var(--ink-4) !important;
}

.card-header,
.box-header {
    border-top-left-radius: var(--r-md) !important;
    border-top-right-radius: var(--r-md) !important;
    border-bottom: 1px solid var(--ink-3) !important;
    padding: 12px 18px !important;
    font-weight: 600;
}

.card-body,
.box-body {
    padding: 16px 18px !important;
}

/* ==========================================================================
 * 2. 表格：紧凑行高 + 精致 hover
 * ========================================================================== */
.table {
    margin-bottom: 0 !important;
}

.table>thead>tr>th {
    background: var(--ink-2) !important;
    border-bottom: 1px solid var(--ink-4) !important;
    font-weight: 600 !important;
    font-size: var(--fz-md) !important;
    padding: 10px 14px !important;
    white-space: nowrap;
    letter-spacing: .2px;
}

.table>tbody>tr>td {
    padding: 10px 14px !important;
    vertical-align: middle !important;
    font-size: var(--fz-md) !important;
    border-top: 1px solid var(--ink-2) !important;
}

.table-hover>tbody>tr:hover,
.table>tbody>tr:hover {
    background: hsl(var(--tg-primary) / .05) !important;
    transition: var(--t-fast);
}

.table code {
    background: var(--ink-3) !important;
    color: inherit !important;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    font-size: var(--fz-sm);
    font-family: 'SF Mono', Menlo, Consolas, monospace;
}

/* ==========================================================================
 * 3. 按钮：统一到 TG 主色
 * ========================================================================== */
.btn {
    border-radius: var(--r-sm) !important;
    font-weight: 500 !important;
    transition: var(--t-smooth);
    padding: 6px 14px !important;
    letter-spacing: .2px;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
}

.btn:active {
    transform: translateY(0);
}

.btn-sm {
    padding: 4px 10px !important;
    font-size: var(--fz-sm) !important;
}

.btn-primary {
    background: hsl(var(--tg-primary)) !important;
    border-color: hsl(var(--tg-primary)) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background: hsl(var(--tg-deep)) !important;
    border-color: hsl(var(--tg-deep)) !important;
    box-shadow: var(--shadow-glow);
}

.btn-success {
    background: hsl(var(--sem-success)) !important;
    border-color: hsl(var(--sem-success)) !important;
}

.btn-danger {
    background: hsl(var(--sem-danger)) !important;
    border-color: hsl(var(--sem-danger)) !important;
}

.btn-warning {
    background: hsl(var(--sem-warn)) !important;
    border-color: hsl(var(--sem-warn)) !important;
    color: #fff !important;
}

/* ==========================================================================
 * 4. 筛选 / Filter 区域 + 工具栏
 * ========================================================================== */
.filter-box,
.box.filter-box {
    background: hsl(var(--tg-primary) / .03) !important;
    border: 1px solid hsl(var(--tg-primary) / .12) !important;
    padding: 14px 18px !important;
    margin-bottom: 12px !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}

.filter-box .form-group {
    margin-bottom: 10px !important;
}

.filter-box label {
    font-size: var(--fz-md) !important;
    font-weight: 600 !important;
    opacity: .8 !important;
    letter-spacing: .2px;
    color: hsl(var(--tg-deep)) !important;
}

/* 工具栏（刷新/筛选按钮那一行）*/
.box-header .box-tools,
.grid-tools {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* 刷新按钮统一风格 */
.box-header .btn-toolbar .btn,
.grid-tools .btn {
    background: transparent !important;
    border: 1px solid var(--ink-4) !important;
    color: inherit !important;
    border-radius: var(--r-sm) !important;
    padding: 5px 12px !important;
    font-size: var(--fz-sm) !important;
    transition: var(--t-smooth);
}

.box-header .btn-toolbar .btn:hover,
.grid-tools .btn:hover {
    background: hsl(var(--tg-primary) / .10) !important;
    border-color: hsl(var(--tg-primary) / .4) !important;
    color: hsl(var(--tg-primary)) !important;
}

.box-header .btn-toolbar .btn:active,
.grid-tools .btn:active {
    background: hsl(var(--tg-primary) / .18) !important;
    transform: scale(.96);
}

/* 筛选展开/收起按钮 */
.btn-filter {
    background: hsl(var(--tg-primary) / .08) !important;
    border-color: hsl(var(--tg-primary) / .25) !important;
    color: hsl(var(--tg-deep)) !important;
    font-weight: 500 !important;
}

.btn-filter:hover {
    background: hsl(var(--tg-primary) / .18) !important;
    border-color: hsl(var(--tg-primary) / .5) !important;
}

.form-control,
.select2-selection,
.select2-selection--single {
    border-radius: var(--r-sm) !important;
    border: 1px solid hsl(var(--tg-primary) / .18) !important;
    background: #fff !important;
    transition: var(--t-smooth);
    color: inherit !important;
    font-size: var(--fz-md) !important;
    height: 34px !important;
}

.form-control:focus,
.select2-selection:focus,
.select2-container--focus .select2-selection {
    border-color: hsl(var(--tg-primary)) !important;
    box-shadow: 0 0 0 3px hsl(var(--tg-primary) / .12) !important;
    outline: none !important;
    background: #fff !important;
}

/* 日期选择器 */
.datetimepicker,
.filter-date {
    border-color: hsl(var(--tg-primary) / .18) !important;
}

/* 筛选区提交/重置按钮 */
.filter-box .btn-primary,
.filter-box .filter-btn {
    background: hsl(var(--tg-primary)) !important;
    border-color: hsl(var(--tg-primary)) !important;
    color: #fff !important;
    padding: 6px 18px !important;
    border-radius: var(--r-sm) !important;
    font-weight: 500 !important;
    letter-spacing: .3px;
}

.filter-box .btn-default,
.filter-box .filter-reset {
    background: transparent !important;
    border: 1px solid var(--ink-4) !important;
    color: inherit !important;
    padding: 6px 18px !important;
    border-radius: var(--r-sm) !important;
}

.filter-box .btn-default:hover,
.filter-box .filter-reset:hover {
    background: var(--ink-3) !important;
}

/* ==========================================================================
 * 5. 分页
 * ========================================================================== */
.pagination {
    margin: 14px 0 !important;
}

.pagination>li>a,
.pagination>li>span {
    border-radius: var(--r-sm) !important;
    margin: 0 3px !important;
    border: 1px solid var(--ink-4) !important;
    color: inherit !important;
    background: transparent !important;
    padding: 6px 12px !important;
    transition: var(--t-smooth);
    min-width: 32px;
    text-align: center;
}

.pagination>li>a:hover {
    background: hsl(var(--tg-primary) / .08) !important;
    border-color: hsl(var(--tg-primary) / .5) !important;
    color: hsl(var(--tg-primary)) !important;
}

.pagination>.active>a,
.pagination>.active>span {
    background: hsl(var(--tg-primary)) !important;
    border-color: hsl(var(--tg-primary)) !important;
    color: #fff !important;
    box-shadow: var(--shadow-glow);
}

/* ==========================================================================
 * 6. 徽章 / 标签
 * ========================================================================== */
.badge,
.label {
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: var(--fz-sm) !important;
    font-weight: 500 !important;
    letter-spacing: .2px;
}

.badge-success,
.label-success {
    background: hsl(var(--sem-success)) !important;
    color: #05291c !important;
}

.badge-info,
.label-info {
    background: hsl(var(--tg-glow)) !important;
    color: #062638 !important;
}

.badge-warning,
.label-warning {
    background: hsl(var(--sem-warn)) !important;
    color: #2a1a03 !important;
}

.badge-danger,
.label-danger {
    background: hsl(var(--sem-danger)) !important;
    color: #3a0b0b !important;
}

.badge-primary,
.label-primary {
    background: hsl(var(--tg-primary)) !important;
    color: #fff !important;
}

/* ==========================================================================
 * 7. Grid 操作列
 * ========================================================================== */
.grid-row-tools .btn,
.grid-action-btn {
    padding: 4px 8px !important;
    margin: 0 2px !important;
    border-radius: var(--r-sm) !important;
}

/* ==========================================================================
 * 8. 侧边栏：宽度锁死 260px + Telegram 蓝 hover/active
 * ========================================================================== */

/* ── 侧边栏：260px 锁死（仅后台页面）── */
body.login-page .main-sidebar,
body.login-page .sidebar,
body.register-page .main-sidebar,
body.register-page .sidebar {
    display: none !important;
}

body.login-page .content-wrapper,
body.login-page .main-header,
body.login-page .main-footer,
body.register-page .content-wrapper,
body.register-page .main-header,
body.register-page .main-footer {
    margin-left: 0 !important;
}

.main-sidebar,
.sidebar {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    flex: 0 0 260px !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    transition: none !important;
    transform: none !important;
}

.content-wrapper,
.main-header,
.main-footer {
    margin-left: 260px !important;
    transition: none !important;
}

/* 折叠按钮隐藏 */
.sidebar-toggle,
.sidebar-mini-btn,
[data-toggle="push-menu"],
.nav-sidebar+.sidebar-toggle {
    display: none !important;
}

/* 折叠状态下也显示文字（避免只剩图标的窄条模式）*/
html body.sidebar-collapse .main-sidebar .nav-link p,
html body.sidebar-collapse .main-sidebar .brand-text,
html body.sidebar-mini .main-sidebar .nav-link p,
html body.sidebar-mini .main-sidebar .brand-text {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 屏幕小时强制保持 210，避免 Dcat 默认的自动核弹折叠 */
@media (max-width: 991.98px) {
    html body .main-sidebar {
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        transform: none !important;
    }

    html body .content-wrapper,
    html body .main-header,
    html body .main-footer {
        margin-left: 260px !important;
    }
}

html body .nav-sidebar .nav-item .nav-link,
html body .main-menu .nav-item .nav-link {
    padding: 9px 12px 9px 20px !important;
    margin: 2px 0 !important;
    border-radius: 0 !important;
    font-size: var(--fz-md) !important;
    min-height: 36px !important;
    height: 36px !important;
    transition: var(--t-smooth);
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
}

/* 确保所有 nav-item 高度一致 */
.nav-sidebar>.nav-item,
.main-menu>.nav-item {
    min-height: 38px !important;
    height: auto !important;
}

/* 有子菜单的 nav-item 也保持一致 */
.nav-sidebar .has-treeview,
.main-menu .has-treeview {
    min-height: 38px !important;
    height: auto !important;
}

/* 子菜单项也统一 */
.nav-sidebar .nav-treeview .nav-item,
.main-menu .nav-treeview .nav-item {
    min-height: 30px !important;
    height: auto !important;
}

.nav-sidebar .nav-treeview .nav-link,
.main-menu .nav-treeview .nav-link {
    padding: 5px 12px 5px 42px !important;
    margin: 1px 0 !important;
    font-size: var(--fz-sm) !important;
    min-height: 30px !important;
    height: 30px !important;
    line-height: 18px !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}

html body .nav-sidebar .nav-item .nav-icon,
html body .main-menu .nav-item .nav-icon {
    font-size: 14px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: .75;
    line-height: 1 !important;
    margin-right: 4px !important;
}

.nav-sidebar .nav-item:not(.active)>.nav-link:hover,
.main-menu .nav-item:not(.active)>.nav-link:hover {
    background: hsl(var(--tg-primary) / .10) !important;
    color: hsl(var(--tg-glow)) !important;
}

.nav-sidebar .nav-item:not(.active)>.nav-link:hover .nav-icon,
.main-menu .nav-item:not(.active)>.nav-link:hover .nav-icon {
    opacity: 1;
}

.nav-sidebar .nav-item.active>.nav-link,
.main-menu .nav-item.active>.nav-link {
    background: linear-gradient(90deg,
            hsl(var(--tg-primary) / .22),
            hsl(var(--tg-primary) / .04)) !important;
    box-shadow: inset 3px 0 0 hsl(var(--tg-primary)) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.nav-sidebar .nav-item.active>.nav-link .nav-icon,
.main-menu .nav-item.active>.nav-link .nav-icon {
    color: hsl(var(--tg-glow)) !important;
    opacity: 1;
}

/* 子菜单缩进 */
.nav-sidebar .nav-treeview .nav-link {
    padding-left: 44px !important;
    font-size: var(--fz-sm) !important;
}

/* 确保所有 nav-link p 标签统一 */
.nav-sidebar .nav-link p,
.main-menu .nav-link p {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
    font-size: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 130px !important;
}

/* ==========================================================================
 * 9. \u6807\u9898 / \u9762\u5305\u5c51\uff08content-header\uff09+ \u5de5\u5177\u680f\u5408\u5e76\u5230\u6807\u9898\u884c
 * ========================================================================== */
.content-header {
    padding: 6px 18px 2px !important;
    margin-bottom: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}

.content-header h1,
.content-header .header {
    font-size: var(--fz-xl) !important;
    font-weight: 600 !important;
    letter-spacing: .2px;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.content-header .description,
.content-header small {
    opacity: .6 !important;
    font-size: var(--fz-md) !important;
    margin-left: 10px !important;
    font-weight: 400;
}

/* \u5de5\u5177\u680f\u6309\u94ae\uff08\u5237\u65b0/\u7b5b\u9009\uff09\u79fb\u5230\u6807\u9898\u680f\u53f3\u4fa7 */
.card-header {
    border-bottom: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
}

.card-header .card-tools {
    position: static !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* \u628a card-header \u91cc\u7684\u5de5\u5177\u6309\u94ae\u79fb\u5165 content-header \u53f3\u4fa7 */
.content-wrapper .content-header+.card .card-header {
    display: flex !important;
    align-items: center !important;
    padding: 0 18px !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    position: relative !important;
}

.content-wrapper .content-header+.card .card-header .card-tools {
    position: absolute !important;
    right: 18px !important;
    top: -32px !important;
}

.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 4px 0 0 0 !important;
    font-size: var(--fz-sm);
    opacity: .7;
}

.breadcrumb>li+li:before {
    content: '\203A' !important;
    padding: 0 8px;
    opacity: .5;
}

/* ==========================================================================
 * 10. 细节：copyable / toastr / modal / tabs
 * ========================================================================== */
.copyable {
    cursor: pointer;
    border-bottom: 1px dashed hsl(var(--tg-primary) / .5);
    transition: var(--t-fast);
}

.copyable:hover {
    color: hsl(var(--tg-primary));
}

.toast {
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-pop) !important;
}

.modal-content {
    border-radius: var(--r-lg) !important;
    border: none !important;
    box-shadow: var(--shadow-pop) !important;
}

.modal-header {
    border-bottom: 1px solid var(--ink-3) !important;
    padding: 14px 20px !important;
}

.modal-footer {
    border-top: 1px solid var(--ink-3) !important;
    padding: 12px 20px !important;
}

.nav-tabs>li>a {
    border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
    padding: 9px 18px !important;
    transition: var(--t-smooth);
}

.nav-tabs>li.active>a {
    font-weight: 600 !important;
    border-bottom: 2px solid hsl(var(--tg-primary)) !important;
}

/* ==========================================================================
 * 11. Select2 多选 / 下拉
 * ========================================================================== */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: hsl(var(--tg-primary) / .12) !important;
    border: 1px solid hsl(var(--tg-primary) / .3) !important;
    color: inherit !important;
    border-radius: var(--r-sm) !important;
    padding: 2px 8px !important;
}

/* ==========================================================================
 * 12. 顶栏导航（Header Navbar）
 * ========================================================================== */
.main-header .navbar,
.header-navbar,
.top-navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .04) !important;
}

/* 顶栏汉堡按钮：融入背景 */
.main-header .nav-link[data-widget="pushmenu"],
.main-header .sidebar-toggle,
.main-header [data-toggle="sidebar"] {
    background: transparent !important;
    color: #cbd5e1 !important;
    border-radius: var(--r-sm) !important;
    padding: 6px 10px !important;
    margin: 6px 4px !important;
    transition: background .18s;
}

.main-header .nav-link[data-widget="pushmenu"]:hover,
.main-header .sidebar-toggle:hover,
.main-header [data-toggle="sidebar"]:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #ffffff !important;
}

/* 顶栏用户头像 */
.user-header img,
.user-image {
    border: 2px solid hsl(var(--tg-primary) / .4) !important;
    border-radius: 50% !important;
}

/* 顶栏右侧下拉菜单 */
.navbar-right .dropdown-menu,
.user-menu .dropdown-menu {
    border-radius: var(--r-lg) !important;
    border: none !important;
    box-shadow: var(--shadow-pop) !important;
    padding: 8px !important;
    min-width: 200px;
}

.dropdown-menu .dropdown-item,
.dropdown-menu>li>a {
    border-radius: var(--r-sm) !important;
    padding: 8px 12px !important;
    font-size: var(--fz-md) !important;
    transition: var(--t-fast);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu>li>a:hover {
    background: hsl(var(--tg-primary) / .12) !important;
    color: hsl(var(--tg-primary)) !important;
}

/* ==========================================================================
 * 13. 侧边栏 logo 区
 * ========================================================================== */
.main-sidebar .brand-link,
.main-sidebar .logo {
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 60px !important;
    line-height: 1.2 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    overflow: hidden;
}

.main-sidebar .brand-link svg,
.main-sidebar .logo svg,
.main-sidebar .brand-link img,
.main-sidebar .logo img {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0;
    opacity: 1;
    filter: drop-shadow(0 4px 10px rgba(34, 158, 217, .45));
    transition: transform .4s ease;
}

.main-sidebar .brand-link:hover svg,
.main-sidebar .logo:hover svg,
.main-sidebar .brand-link:hover img,
.main-sidebar .logo:hover img {
    transform: rotate(-8deg) scale(1.06);
}

.main-sidebar .brand-link span,
.main-sidebar .logo span {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: .4px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2 !important;
    color: #f1f5f9 !important;
}

/* ==========================================================================
 * 14. 滚动条 / waves / text-muted
 * ========================================================================== */
.text-muted {
    opacity: .6 !important;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--ink-4);
    border-radius: var(--r-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ink-5);
}

.waves-ripple {
    background: hsl(var(--tg-primary) / .3) !important;
}

.table td a[href^="http"] {
    word-break: break-all;
}

.box-tools,
.grid-tools {
    gap: 6px !important;
}

/* ==========================================================================
 * 15. 侧边栏防抖动 + 导航统一
 * ========================================================================== */
.main-sidebar .sidebar-header,
.main-sidebar .brand-link,
.main-sidebar .logo {
    width: 260px !important;
    min-width: 260px !important;
    box-sizing: border-box !important;
}

.nav-sidebar,
.main-sidebar nav,
.main-sidebar .sidebar-nav {
    width: 100% !important;
    overflow: visible !important;
}

.nav-sidebar>.nav-item {
    width: 100% !important;
    box-sizing: border-box !important;
}

.nav-sidebar .nav-item .nav-link {
    width: auto !important;
    min-width: 0 !important;
}

.nav-sidebar .nav-treeview {
    position: relative !important;
    width: 100% !important;
}

.main-header {
    min-height: 48px !important;
    height: auto !important;
}

.main-sidebar .nav-link p {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 130px !important;
}

/* ==========================================================================
 * 16. Grid 工具栏对齐
 * ========================================================================== */
.card-header .card-title,
.box-header .box-title {
    font-size: var(--fz-lg) !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.grid-table-wrapper {
    border-radius: var(--r-md) !important;
    overflow: hidden !important;
}

.grid-actions,
.grid-toolbar {
    gap: 6px !important;
    flex-wrap: wrap !important;
}

/* ==========================================================================
 * 17. 侧边栏内间距右移，与顶栏对齐
 * ========================================================================== */
.main-sidebar .sidebar {
    padding: 0 !important;
}

.main-sidebar .nav-sidebar,
.main-sidebar .sidebar-nav {
    padding: 8px 0 !important;
}

.nav-sidebar .nav-item .nav-link {
    padding-left: 20px !important;
    padding-right: 12px !important;
}

/* 顶栏 logo 区与侧边栏菜单对齐 */
.main-sidebar .brand-link,
.main-sidebar .logo,
.sidebar-brand {
    padding-left: 20px !important;
    padding-right: 12px !important;
}

/* 子菜单缩进同步 */
.nav-sidebar .nav-treeview .nav-link {
    padding-left: 44px !important;
}

/* ==========================================================================
 * 18. IP 地址列截断
 * ========================================================================== */
.column-ip_address,
.column-ip_address-cell {
    max-width: 130px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-family: 'SF Mono', Menlo, Consolas, monospace !important;
    font-size: var(--fz-sm) !important;
}

/* ==========================================================================
 * 19. 全局暗色底（所有页面统一）
 * ========================================================================== */
body,
.content-wrapper,
.main-content,
.main-footer,
.box,
.card,
.table-responsive {
    background: #0f172a !important;
    color: #e2e8f0 !important;
}

/* 内容卡片保持可辨 */
.box-body,
.card-body {
    background: rgba(30, 41, 59, .6) !important;
}

/* 表格隔行交替 */
.table-striped>tbody>tr:nth-of-type(odd) {
    background: rgba(30, 41, 59, .4) !important;
}

/* 输入框暗色适配 */
.form-control,
.select2-selection,
.select2-selection--single {
    background: rgba(30, 41, 59, .8) !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, .25) !important;
}

.form-control:focus,
.select2-selection:focus,
.select2-container--focus .select2-selection {
    background: rgba(30, 41, 59, .95) !important;
    border-color: hsl(var(--tg-primary)) !important;
    box-shadow: 0 0 0 3px hsl(var(--tg-primary) / .15) !important;
}

/* sidebar-mini / sidebar-collapse 禁用（Dcat 3 点菜单会加 sidebar-collapse class，需同步锁宽）*/
.sidebar-mini .main-sidebar,
.sidebar-no-collapse .main-sidebar,
html body.sidebar-collapse .main-sidebar,
html body.sidebar-collapse .sidebar,
html body.sidebar-mini-md .main-sidebar,
html body.sidebar-mini-xs .main-sidebar {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    flex: 0 0 260px !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.sidebar-mini .main-sidebar .nav-link p,
.sidebar-no-collapse .main-sidebar .nav-link p,
.sidebar-mini .main-sidebar .brand-text,
.sidebar-no-collapse .main-sidebar .brand-text,
html body.sidebar-collapse .main-sidebar .nav-link p,
html body.sidebar-collapse .main-sidebar .brand-text {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-left: 0 !important;
}

.sidebar-mini .content-wrapper,
.sidebar-mini .main-header,
.sidebar-mini .main-footer,
.sidebar-no-collapse .content-wrapper,
.sidebar-no-collapse .main-header,
.sidebar-no-collapse .main-footer,
html body.sidebar-collapse .content-wrapper,
html body.sidebar-collapse .main-header,
html body.sidebar-collapse .main-footer {
    margin-left: 260px !important;
}

/* 子菜单展开动画不因 collapse 而隐藏 */
html body.sidebar-collapse .nav-sidebar .nav-treeview {
    display: block !important;
}

/* ==========================================================================
 * 20. 菜单展开/收起箭头
 * ========================================================================== */
.nav-sidebar .nav-link>.right,
.nav-sidebar .nav-link>.fa-angle-left,
.nav-sidebar .nav-link>i.right,
.main-menu .nav-link>.right {
    font-size: 11px !important;
    opacity: .5;
    margin-left: auto;
    transition: transform .25s;
}

.nav-sidebar .menu-open>.nav-link>.right,
.nav-sidebar .menu-is-opening>.nav-link>.right,
.main-menu .menu-open>.nav-link>.right {
    transform: rotate(-90deg);
    opacity: .8;
}

/* ==========================================================================
 * 21. 侧边栏深色背景 + 分组分隔
 * ========================================================================== */
.main-sidebar,
.main-sidebar .sidebar {
    background: #1e293b !important;
}

/* 分组分隔线（系统设置之前） */
.nav-sidebar>.nav-item:last-child,
.main-menu>.nav-item:last-child,
.nav-sidebar>li:last-child,
.main-menu>li:last-child {
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

/* 可选分组 header */
.nav-sidebar .nav-header,
.main-menu .nav-header {
    padding: 12px 16px 6px !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
    color: #64748b !important;
    text-transform: uppercase;
    font-weight: 600;
    background: transparent !important;
}

/* ==========================================================================
 * 22. 登录页美化
 * ========================================================================== */
.login-box,
.register-box {
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .15) !important;
}

/* ==========================================================================
 * 23. 内容区 padding
 * ========================================================================== */
.content-wrapper>.content,
.content-wrapper>section.content {
    padding: 8px 14px 18px !important;
}

/* ==========================================================================
 * 24. 折叠态下：logo 文字隐藏
 * ========================================================================== */
body.sidebar-collapse .main-sidebar .brand-link span,
body.sidebar-collapse .main-sidebar .logo span {
    opacity: 0;
    width: 0;
    display: none !important;
}

body.sidebar-collapse .nav-sidebar .nav-link {
    text-align: center;
    justify-content: center;
    padding: 10px 0 !important;
}

body.sidebar-collapse .nav-sidebar .nav-link .nav-icon {
    margin-right: 0 !important;
}