@charset "UTF-8";

:root {
    /* 基础颜色定义 */
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #ff3860;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    
    /* 主题颜色定义 (使用新的品牌色) */
    --brand-primary: #029efe;
    --brand-primary-hover: #0088e6; /* 品牌色加深，用于 hover 状态 */
    --brand-primary-active: #0077cc; /* 品牌色更深，用于 active 状态 */
    --brand-primary-disabled: #80c9ff; /* 品牌色变浅，用于 disabled 状态 */
    --brand-primary-rgba: rgba(2, 158, 254, 0.5); /* 品牌色半透明，用于 focus 阴影 */

    /* 兼容原代码的变量映射 */
    --primary: var(--brand-primary);
    --secondary: var(--gray-300);
    --success: var(--green);
    --info: var(--cyan);
    --warning: var(--yellow);
    --danger: var(--red);
    --light: var(--gray-100);
    --dark: var(--gray-800);
    --grey-100: var(--gray-100);
    --grey-150: #ececec;
    --grey-200: var(--gray-200);
    --nblue: var(--brand-primary);
}

/* 全局样式 */
a {
    color: var(--dark);
    text-decoration: none;
}

a:hover {
    color: var(--brand-primary);
    text-decoration: none;
}

body {
    font-family: "Hiragino Sans GB", "Microsoft Yahei", "PingFang SC", "Helvetica Neue", sans-serif;
    background-color: var(--gray-100);
    color: var(--gray-800);
}

/* 导航栏 */
.navbar {
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.navbar.bg-dark {
    background-color: var(--white) !important;
}

.navbar-dark .navbar-toggler {
    border-color: transparent !important;
    color: var(--dark);
    padding: 1rem;
}

.navbar-dark .navbar-toggler:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f0c9";
}

.navbar-dark .navbar-toggler-icon {
    display: none;
}

.navbar-dark .navbar-brand {
    color: var(--dark);
    padding: 0;
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--dark);
    padding: .875rem 1rem;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link {
    color: var(--dark);
}

/* 修复并优化导航项的 active, focus, hover 效果 */
.navbar-dark .navbar-nav .nav-item.active>.nav-link,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--brand-primary);
    border-bottom: 2px solid var(--brand-primary);
}

/* 修复原代码中的语法错误 */
.navbar-dark .navbar-brand:focus,
.navbar-dark .navbar-brand:hover {
    color: var(--brand-primary);
}

/* 卡片 */
.card {
    background: var(--white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    border-color: var(--grey-150);
    border-radius: 4px;
}

.card > .card-header {
    background-image: none;
    background-color: transparent;
    border-color: var(--gray-200);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.card-header-tabs {
    margin-top: -.25rem;
}

.card-header-tabs > .nav-item > .nav-link {
    border-width: 0 0 2px 0;
}

.card-header-tabs > .nav-item > .nav-link:hover:not(.active) {
    border-color: transparent;
}

.card-header-tabs > .nav-item > .nav-link.active {
    background-image: none;
    background: var(--white);
    border-color: var(--brand-primary);
    border-width: 0 0 2px 0;
    color: var(--brand-primary);
}

.card.card-threadlist > .card-body {
    padding: .25rem 1rem;
}

.card.card-threadlist > .card-body > .threadlist .ml-2.d-none {
    display: inline-flex !important;
}

.card.card-threadlist > .card-body > .threadlist .d-flex.justify-content-between.small {
    font-size: 12px;
}

.card.card-postlist {
    font-size: 14px;
}

.thread,
.post {
    border-color: var(--gray-200);
}

/* 分页 */
.page-item .page-link {
    color: var(--dark);
    border-color: var(--gray-300);
    margin-left: -1px; /* 修复边框重叠问题 */
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.page-item.active .page-link {
    color: var(--white);
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.page-item .page-link:hover {
    color: var(--brand-primary);
    background-color: var(--gray-100);
    border-color: var(--gray-300);
}

/* 分割线 */
.card.card-thread hr {
    border-color: var(--gray-200);
}

/* 卡片页脚 */
.card-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--gray-200);
}

/* 面包屑导航 */
.breadcrumb {
    background-color: var(--white) !important;
    border: 1px solid var(--grey-150) !important;
    border-radius: 4px;
    font-size: 14px;
    padding: 0.5rem 1rem;
}

/* 侧边栏标签列表 */
.nav_tag_list {
    display: flex;
    flex-direction: column;
}

[class^=icon-top-]:before {
    content: "\f0aa";
}

/* 页脚 */
#footer.bg-dark {
    background-color: var(--white) !important;
    font-size: 12px;
    color: var(--gray-600);
    border-top: 1px solid var(--gray-200);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.aside > a.btn {
    display: none;
}

/* 按钮样式 (使用新的品牌色) */
.btn-primary {
    color: #fff;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.2rem var(--brand-primary-rgba);
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: var(--brand-primary-disabled);
    border-color: var(--brand-primary-disabled);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--brand-primary-active);
    border-color: var(--brand-primary-active);
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--brand-primary-rgba);
}

/* 其他按钮样式保持与原设计一致，仅在需要时调整 */
.btn-secondary {
    color: var(--gray-800);
    background-color: var(--gray-200);
    border-color: var(--gray-200);
}

.btn-secondary:hover {
    color: var(--gray-900);
    background-color: var(--gray-300);
    border-color: var(--gray-300);
}

/* ... (其他按钮样式如 success, info, warning, danger, light, dark 等保持不变) ... */
/* 这里省略了其他按钮的完整代码，它们与原代码逻辑相同，只需确保颜色变量正确即可 */

/* 边框按钮样式 */
.btn-outline-primary {
    color: var(--brand-primary);
    background-color: transparent;
    background-image: none;
    border-color: var(--brand-primary);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem var(--brand-primary-rgba);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--brand-primary-disabled);
    background-color: transparent;
    border-color: var(--brand-primary-disabled);
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--brand-primary-rgba);
}

/* ... (其他边框按钮样式保持不变) ... */

/* 响应式布局 */
@media screen and (min-width: 1408px) {
    html {
        font-size: 15px;
    }

    .navbar > .container,
    #body > .container,
    #footer > .container {
        max-width: 1200px;
        width: 1200px;
    }
}

@media (max-width: 576px) {
    html {
        font-size: 13px;
    }
}