@charset "utf-8";
/* ============================================================================
   theme.css — 全局主题（清爽学术风）
   设计原则：白底 / 1px 细线 / 单一深青强调色 / 小圆角 / 无渐变无大投影
   作用范围：顶部导航、页脚、全局排版基线
   引入方式：加入 assets/AppAsset.php 的 css 数组末尾（覆盖 Bootstrap 默认外观）
   ============================================================================ */

:root {
    --ink:        #16202A;  /* 主文字 */
    --ink-2:      #3D4A52;  /* 次文字 */
    --ink-3:      #5C6A66;  /* 三级文字 */
    --muted:      #8A9490;  /* 弱化说明 */
    --line:       #E4E7E4;  /* 分隔线 */
    --line-soft:  #F0F2F0;  /* 轻分隔线 */
    --paper:      #FFFFFF;
    --page:       #F6F7F5;  /* 页面底 */
    --brand:      #0F5C6B;  /* 强调色（深青） */
    --brand-dark: #0A4149;
    --brand-soft: #EAF1F0;
    --ok:         #2E6B3E;
    --warn:       #A85B00;
    --danger:     #A32D2D;
    --nav-h:      56px;
    --foot-h:     64px;
    --edge:       1240px;
}

/* ---------------------------------------------------------------- 排版基线 */
/* site.css 给 html 和 body 都设了 #e7e7e7 且 height:100%，只覆盖 body 的底色，
   内容超出视口后下方会露出 html 的深灰底，造成"上半浅、下半深"。这里同步 html 底色。 */
html {
    background-color: var(--page);
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--brand);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover,
a:focus {
    color: var(--brand-dark);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--ink);
}

/* 数字统一等宽，表格/榜单对齐才不会跳 */
.num,
.panel-body time,
.tabular {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ 顶部导航栏 */
.site-navbar {
    background-color: var(--paper);
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    min-height: var(--nav-h);
    margin-bottom: 0;
    box-shadow: none;
}
.site-navbar .container {
    position: relative;
}

/* 品牌区：色块 + 站名 */
.site-navbar .navbar-brand,
/* 特异性需与 Bootstrap 的 .navbar > .container .navbar-brand 持平，否则被其 margin-left:-15px 拉出容器 */
.site-navbar.navbar > .container .navbar-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    height: var(--nav-h);
    margin-left: 0;
    padding: 0 20px 0 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: var(--nav-h);
}
.site-navbar .navbar-brand:hover,
.site-navbar .navbar-brand:focus {
    color: var(--brand);
    background: transparent;
}
.site-navbar .brand-suffix {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: .5px;
}
.site-navbar .navbar-brand::before {
    content: "王";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 3px;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    flex: none;
}

/* 菜单项：无图标、底部 2px 指示线 */
.site-navbar .navbar-nav > li > a {
    height: var(--nav-h);
    padding: 0 11px;
    line-height: var(--nav-h);
    color: var(--ink-2);
    font-size: 13px;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.site-navbar .navbar-nav > li > a:hover,
.site-navbar .navbar-nav > li > a:focus {
    color: var(--brand);
    background-color: transparent;
    border-bottom-color: var(--brand);
}
.site-navbar .navbar-nav > li.active > a,
.site-navbar .navbar-nav > li.active > a:hover,
.site-navbar .navbar-nav > li.active > a:focus {
    color: var(--brand);
    background-color: transparent;
    border-bottom-color: var(--brand);
    font-weight: 500;
}
.site-navbar .navbar-nav > li.open > a,
.site-navbar .navbar-nav > li.open > a:focus {
    color: var(--brand);
    background-color: transparent;
    border-bottom-color: var(--brand);
}
.site-navbar .navbar-nav > .open > .dropdown-menu {
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(22, 32, 42, .08);
    padding: 4px 0;
    margin-top: 2px;
}
.site-navbar .navbar-nav .dropdown-menu > li > a {
    padding: 7px 16px;
    font-size: 13px;
    color: var(--ink-2);
}
.site-navbar .navbar-nav .dropdown-menu > li > a:hover,
.site-navbar .navbar-nav .dropdown-menu > li > a:focus {
    background-color: var(--brand-soft);
    color: var(--brand);
}
.site-navbar .navbar-nav .dropdown-menu > .divider {
    background-color: var(--line);
    margin: 4px 0;
}

/* 用户名项里的头像 */
.site-navbar .navbar-nav .img-circle {
    border-radius: 50%;
    object-fit: cover;
    margin-right: 4px;
}

/* 折叠按钮（窄屏） */
.site-navbar .navbar-toggle {
    border: 1px solid var(--line);
    border-radius: 3px;
    margin-top: 12px;
    margin-bottom: 12px;
}
.site-navbar .navbar-toggle:hover,
.site-navbar .navbar-toggle:focus {
    background-color: var(--brand-soft);
}
.site-navbar .navbar-toggle .icon-bar {
    background-color: var(--ink-3);
}

/* 窄屏展开后：去掉高度约束（断点须与 Bootstrap navbar 折叠点 768 一致，
   否则 768~991 区间 float 布局与负 margin 冲突，菜单会被顶到第二行） */
@media (max-width: 767px) {
    .site-navbar .navbar-nav > li > a {
        height: auto;
        line-height: 1.6;
        padding: 10px 14px;
        border-bottom: 0;
        border-left: 2px solid transparent;
    }
    .site-navbar .navbar-nav > li > a:hover,
    .site-navbar .navbar-nav > li.active > a {
        border-left-color: var(--brand);
        border-bottom-color: transparent;
    }
    .site-navbar .navbar-nav {
        margin: 6px -15px;
        border-top: 1px solid var(--line);
    }
}

/* 768~991：菜单仍在一行，收紧间距保证 11 项不折行 */
@media (min-width: 768px) and (max-width: 991px) {
    .site-navbar .navbar-nav > li > a {
        padding: 0 8px;
        font-size: 12.5px;
    }
    .site-navbar .navbar-brand {
        padding-right: 10px;
        font-size: 14px;
    }
}

/* ------------------------------------------------------------------- 页脚 */
.site-footer {
    height: var(--foot-h);
    background-color: var(--paper);
    border-top: 1px solid var(--line);
    padding: 0;
    color: var(--muted);
    font-size: 12px;
}
.site-footer .container {
    padding-top: 21px;
}
.site-footer a {
    color: var(--ink-2);
    text-decoration: none;
}
.site-footer a:hover {
    color: var(--brand);
    text-decoration: none;
}
.site-footer .num {
    color: var(--brand);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 撑底布局跟随页脚高度 */
.wrap {
    margin: 0 auto calc(var(--foot-h) * -1);
    padding: 0 0 var(--foot-h);
}

/* 内容区更宽一点，和导航对齐 */
@media (min-width: 1200px) {
    .site-navbar .container,
    .site-footer .container,
    .wrap > .container {
        width: var(--edge);
    }
}

/* ------------------------------------------------- 面包屑 / 提示条（全站） */
.breadcrumb {
    background-color: transparent;
    padding: 0 0 12px;
    margin: 0;
    font-size: 12px;
    color: var(--muted);
    border-radius: 0;
}
.breadcrumb > li + li::before {
    content: "/";
    color: var(--line);
    padding: 0 6px;
}
.breadcrumb > .active {
    color: var(--ink-3);
}

.alert {
    border-radius: 3px;
    border: 1px solid var(--line);
    font-size: 13px;
    padding: 10px 14px;
}
.alert-success { background: #F1F7EF; border-color: #D8E7D2; color: var(--ok); }
.alert-info    { background: var(--brand-soft); border-color: #CFE0DE; color: var(--brand); }
.alert-warning { background: #FBF4E8; border-color: #EEDFC4; color: var(--warn); }
.alert-danger  { background: #FBEFEF; border-color: #EED6D6; color: var(--danger); }