/*!
 * themes.css — 脚手架管理系统设计主题层
 *
 * 设计令牌来源（awesome-design-md/design-md）：
 *   - skin-stripe   Stripe  DESIGN.md：亮色画布 #f6f9fc、主色 #533afd、墨色 #0d253d
 *   - skin-linear   Linear  DESIGN.md：近黑画布 #0f1011、薰衣草蓝 #5e6ad2、发丝线 #23252a
 *   - skin-supabase Supabase DESIGN.md：石墨画布 #1c1c1c、主色 #3ecf8e
 *   - skin-vercel   Vercel  DESIGN.md：极简白画布 #fafafa、墨黑 #171717、链接蓝 #0070f3
 *
 * 主题通过 body 上的 skin-* 类切换；内嵌业务页通过通用令牌获得统一的
 * 卡片/按钮/表单/表格抛光，框架层（侧边栏、顶栏、页签）完整跟随主题。
 */

/* =========================================================
 * 1. 设计令牌（默认 = Stripe 亮色）
 * ========================================================= */
body {
    --sd-primary: #533afd;
    --sd-primary-hover: #4434d4;
    --sd-primary-soft: #edecfe;
    --sd-on-primary: #ffffff;
    --sd-ink: #0d253d;
    --sd-ink-2: #273951;
    --sd-ink-3: #64748d;
    --sd-canvas: #f6f9fc;
    --sd-surface: #ffffff;
    --sd-hairline: #e3e8ee;
    --sd-chrome-bg: #ffffff;          /* 侧边栏/顶栏底色 */
    --sd-chrome-ink: #334155b3;       /* 侧边栏文字 */
    --sd-chrome-ink-strong: #0d253d;
    --sd-chrome-active-bg: #edecfe;
    --sd-chrome-active-ink: #533afd;
    --sd-topbar-bg: #ffffff;
    --sd-topbar-ink: #0d253d;
    --sd-shadow: 0 1px 2px rgba(13, 37, 61, .05), 0 1px 3px rgba(13, 37, 61, .06);
    --sd-shadow-lg: 0 8px 24px rgba(13, 37, 61, .09);
    --sd-radius: 10px;
}

/* 主题字体 */
body,
body button,
body input,
body select,
body textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
        "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* =========================================================
 * 2. skin-stripe —— Stripe：清爽亮色（默认亮色骨架的显式声明）
 * ========================================================= */
body.skin-stripe {
    --sd-chrome-bg: #ffffff;
    --sd-chrome-ink: #64748d;
    --sd-chrome-ink-strong: #0d253d;
    --sd-chrome-active-bg: #edecfe;
    --sd-chrome-active-ink: #533afd;
    --sd-topbar-bg: #ffffff;
    --sd-topbar-ink: #0d253d;
}

/* =========================================================
 * 3. skin-linear —— Linear：深邃暗黑框架 + 薰衣草蓝
 *    （内容区保持浅色以保证业务页可读性，深色体现在侧边栏与顶栏）
 * ========================================================= */
body.skin-linear {
    --sd-primary: #5e6ad2;
    --sd-primary-hover: #828fff;
    --sd-primary-soft: #eef0fd;
    --sd-ink: #17181a;
    --sd-ink-2: #3f434c;
    --sd-ink-3: #8a8f98;
    --sd-canvas: #f7f8f8;
    --sd-surface: #ffffff;
    --sd-hairline: #e6e7eb;
    --sd-chrome-bg: #0f1011;
    --sd-chrome-ink: #8a8f98;
    --sd-chrome-ink-strong: #f7f8f8;
    --sd-chrome-active-bg: #23244d;
    --sd-chrome-active-ink: #828fff;
    --sd-topbar-bg: #17181a;
    --sd-topbar-ink: #f7f8f8;
    --sd-shadow: 0 1px 2px rgba(23, 24, 26, .05), 0 1px 3px rgba(23, 24, 26, .06);
    --sd-shadow-lg: 0 8px 24px rgba(23, 24, 26, .12);
}

/* =========================================================
 * 4. skin-supabase —— Supabase：石墨 + 清新绿
 * ========================================================= */
body.skin-supabase {
    --sd-primary: #3ecf8e;
    --sd-primary-hover: #24b47e;
    --sd-primary-soft: #e6f9f0;
    --sd-on-primary: #0f2a1d;
    --sd-ink: #171717;
    --sd-ink-2: #212121;
    --sd-ink-3: #707070;
    --sd-canvas: #fafafa;
    --sd-surface: #ffffff;
    --sd-hairline: #dfdfdf;
    --sd-chrome-bg: #1c1c1c;
    --sd-chrome-ink: #9a9a9a;
    --sd-chrome-ink-strong: #ffffff;
    --sd-chrome-active-bg: #26362e;
    --sd-chrome-active-ink: #3ecf8e;
    --sd-topbar-bg: #ffffff;
    --sd-topbar-ink: #171717;
}

/* =========================================================
 * 5. skin-vercel —— Vercel：极简黑白 + 链接蓝
 * ========================================================= */
body.skin-vercel {
    --sd-primary: #171717;
    --sd-primary-hover: #383838;
    --sd-primary-soft: #f2f2f2;
    --sd-ink: #171717;
    --sd-ink-2: #4d4d4d;
    --sd-ink-3: #888888;
    --sd-canvas: #fafafa;
    --sd-surface: #ffffff;
    --sd-hairline: #ebebeb;
    --sd-chrome-bg: #ffffff;
    --sd-chrome-ink: #888888;
    --sd-chrome-ink-strong: #171717;
    --sd-chrome-active-bg: #f2f2f2;
    --sd-chrome-active-ink: #171717;
    --sd-topbar-bg: #ffffff;
    --sd-topbar-ink: #171717;
    --sd-accent-link: #0070f3;
    --sd-radius: 8px;
}

/* =========================================================
 * 6. 通用组件抛光（所有页面生效，使用令牌自动跟随主题）
 * ========================================================= */

/* 页面画布 */
body.gray-bg,
#page-wrapper {
    background-color: var(--sd-canvas);
}

/* 卡片（ibox / panel） */
.ibox {
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow);
    margin-bottom: 20px;
    background: var(--sd-surface);
}
.ibox-title {
    padding: 15px 20px;
    border-bottom: 1px solid transparent;
}
.ibox-content,
.ibox-footer {
    padding: 18px 20px;
}
.ibox.float-e-margins:hover {
    box-shadow: var(--sd-shadow-lg);
}
.panel-default {
    border-color: var(--sd-hairline);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow);
}
.panel-default > .panel-heading {
    background: var(--sd-surface);
    border-color: var(--sd-hairline);
    border-radius: calc(var(--sd-radius) - 1px) calc(var(--sd-radius) - 1px) 0 0;
}

/* 按钮 */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all .15s ease;
}
.btn-primary,
.btn-info {
    background-color: var(--sd-primary);
    border-color: var(--sd-primary);
    color: var(--sd-on-primary, #fff);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active,
.btn-info:hover,
.btn-info:focus,
.btn-info.active,
.btn-info:active {
    background-color: var(--sd-primary-hover);
    border-color: var(--sd-primary-hover);
    color: var(--sd-on-primary, #fff);
}
.btn-success {
    background-color: var(--sd-primary);
    border-color: var(--sd-primary);
    color: var(--sd-on-primary, #fff);
}
.btn-success:hover,
.btn-success:focus,
.btn-success.active,
.btn-success:active {
    background-color: var(--sd-primary-hover);
    border-color: var(--sd-primary-hover);
    color: var(--sd-on-primary, #fff);
}
.btn-outline {
    color: var(--sd-primary);
}
.btn-white {
    border-color: var(--sd-hairline);
    color: var(--sd-ink-2);
}
.btn-white:hover,
.btn-white:focus {
    border-color: var(--sd-primary);
    color: var(--sd-primary);
    background: var(--sd-surface);
}

/* 表单控件 */
.form-control {
    border-color: var(--sd-hairline);
    border-radius: 8px;
    box-shadow: none;
    color: var(--sd-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--sd-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sd-primary) 15%, transparent);
}
.input-group-addon {
    background: var(--sd-canvas);
    border-color: var(--sd-hairline);
    color: var(--sd-ink-3);
}

/* 表格 */
.table > thead > tr > th {
    color: var(--sd-ink-3);
    font-weight: 600;
    border-bottom: 1px solid var(--sd-hairline);
    background: transparent;
}
.table > tbody > tr > td {
    border-top: 1px solid var(--sd-hairline);
    color: var(--sd-ink-2);
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background: color-mix(in srgb, var(--sd-canvas) 55%, transparent);
}
.table-hover > tbody > tr:hover {
    background: var(--sd-primary-soft);
}
.fixed-table-container thead th > .th-inner {
    color: var(--sd-ink-3);
}

/* 分页 */
.pagination > li > a,
.pagination > li > span {
    border-color: var(--sd-hairline);
    color: var(--sd-ink-2);
}
.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--sd-primary);
    border-color: var(--sd-primary);
    color: var(--sd-on-primary, #fff);
}
.page-link {
    color: var(--sd-primary);
}

/* 标签与徽章 */
.label-primary,
.badge-primary {
    background-color: var(--sd-primary);
}
.label-success {
    background-color: #27a644;
}

/* 下拉菜单 */
.dropdown-menu {
    border-color: var(--sd-hairline);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow-lg);
}
.dropdown-menu > li > a {
    color: var(--sd-ink-2);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--sd-primary-soft);
    color: var(--sd-chrome-active-ink, var(--sd-primary));
}

/* 模态框 */
.modal-content {
    border: 1px solid var(--sd-hairline);
    border-radius: 14px;
    box-shadow: var(--sd-shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--sd-hairline);
}
.modal-footer {
    border-top: 1px solid var(--sd-hairline);
}

/* 页签（nav-tabs，页面内部） */
.nav-tabs > li > a {
    color: var(--sd-ink-3);
    border-color: transparent;
    border-radius: 8px 8px 0 0;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--sd-primary);
    border: none;
    border-bottom: 2px solid var(--sd-primary);
    background: transparent;
}
.nav-tabs.nav-tabs-bordered > li.active > a {
    border: 1px solid var(--sd-hairline);
    border-bottom-color: transparent;
    background: var(--sd-surface);
}

/* 滚动条（webkit） */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--sd-ink-3) 45%, transparent);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--sd-ink-3);
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* =========================================================
 * 7. 框架层：顶栏 / 侧边栏 / 页签（跟随主题令牌）
 * ========================================================= */

/* 顶栏 */
body .navbar {
    background-color: var(--sd-topbar-bg);
    box-shadow: inset 0 -1px 0 var(--sd-hairline);
}
body.skin-linear .navbar {
    box-shadow: inset 0 -1px 0 var(--sd-hairline);
}
body .navbar .navbar-top-links > li > a,
body .navbar .welcome-message > li > a {
    color: var(--sd-topbar-ink);
}
body .navbar .navbar-top-links > li > a:hover,
body .navbar .navbar-top-links > li > a:focus,
body .navbar .navbar-top-links .open > a {
    background: var(--sd-primary-soft);
    color: var(--sd-chrome-active-ink, var(--sd-primary));
}
body .navbar .navbar-minimalize {
    color: var(--sd-topbar-ink) !important;
}
body .navbar .user-image {
    border: 2px solid var(--sd-hairline);
}
body .navbar .nav > li > a .nav-label {
    color: inherit;
}
body .navbar .dropdown-menu > li > a {
    color: var(--sd-ink-2);
}

/* 顶栏页签行 */
body .content-tabs {
    background: var(--sd-topbar-bg);
    border-bottom: 1px solid var(--sd-hairline);
}
body .menuTab {
    color: var(--sd-ink-3);
    border: 1px solid transparent;
    border-radius: 8px;
    margin: 4px 2px 4px 6px;
    padding: 4px 12px;
}
body .menuTab:hover {
    color: var(--sd-primary);
    background: var(--sd-primary-soft);
}
body .menuTab.active {
    background: var(--sd-primary);
    border-color: var(--sd-primary);
    color: var(--sd-on-primary, #fff);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--sd-primary) 35%, transparent);
}
body .menuTab .fa-times {
    margin-left: 6px;
}
body .menuTab.active .fa-times:hover {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}
body .roll-nav {
    background: transparent;
    color: var(--sd-ink-3);
}
body .roll-nav:hover {
    color: var(--sd-primary);
    background: var(--sd-primary-soft);
}

/* 侧边栏 */
body .navbar-default,
body .navbar-static-side {
    background-color: var(--sd-chrome-bg);
    box-shadow: inset -1px 0 0 var(--sd-hairline);
}
body .navbar-default .logo,
body .logo {
    background: transparent;
    color: var(--sd-chrome-ink-strong);
    font-weight: 700;
    letter-spacing: .5px;
    font-size: 17px;
    box-shadow: inset -1px -1px 0 var(--sd-hairline);
}
/* 导航栏 Logo 图片（系统设置中上传后显示） */
body .logo-lg-img {
    display: inline-block;
    height: 36px;
    max-width: 160px;
    object-fit: contain;
    vertical-align: middle;
}
body .brand-logo-img {
    height: 44px;
    max-width: 200px;
    object-fit: contain;
    vertical-align: middle;
    margin-bottom: 8px;
}
body .navbar-default .nav > li > a {
    color: var(--sd-chrome-ink);
    font-weight: 500;
    transition: all .15s ease;
}
body .navbar-default .nav > li > a:hover,
body .navbar-default .nav > li > a:focus {
    background: transparent;
    color: var(--sd-chrome-ink-strong);
}
body .navbar-default .nav > li.active > a,
body .navbar-default .nav > li.selected > a,
body .navbar-default .nav > li.active > a:hover,
body .navbar-default .nav > li.selected > a:focus {
    background: var(--sd-chrome-active-bg);
    color: var(--sd-chrome-active-ink);
    box-shadow: none;
}
body .navbar-default .nav > li.active > a .nav-label,
body .navbar-default .nav > li.selected > a .nav-label {
    color: var(--sd-chrome-active-ink);
}
body .navbar-default .nav > li > a .arrow {
    color: var(--sd-chrome-ink);
}
/* 二级/三级菜单 */
body .navbar-default .nav .nav-second-level > li > a,
body .navbar-default .nav .nav-third-level > li > a,
body .navbar-default .nav .nav-four-level > li > a {
    color: var(--sd-chrome-ink);
    border-radius: 6px;
    margin: 0 8px;
    padding: 8px 10px 8px 22px;
}
body .navbar-default .nav .nav-second-level > li > a:hover,
body .navbar-default .nav .nav-third-level > li > a:hover,
body .navbar-default .nav .nav-four-level > li > a:hover {
    background: color-mix(in srgb, var(--sd-chrome-active-bg) 65%, transparent);
    color: var(--sd-chrome-active-ink);
}
body .navbar-default .nav .nav-second-level > li.active > a,
body .navbar-default .nav .nav-third-level > li.active > a,
body .navbar-default .nav .nav-four-level > li.active > a {
    background: var(--sd-chrome-active-bg);
    color: var(--sd-chrome-active-ink);
}

/* 用户信息面板 */
body .user-panel > .info > p {
    color: var(--sd-chrome-ink-strong);
    font-weight: 600;
}
body .user-panel > .info > a {
    color: var(--sd-chrome-ink);
}
body .user-panel > .info > a:hover {
    color: var(--sd-chrome-active-ink);
}

/* mini 折叠态浮层 */
body.mini-navbar .nav li:hover > a > span.nav-label,
body.mini-navbar .nav li:hover > .nav-second-level {
    background: var(--sd-chrome-bg);
}
body.mini-navbar .nav li:hover > a,
body.mini-navbar .nav li:hover > span.nav-label {
    color: var(--sd-chrome-active-ink);
}

/* 底部版权 */
body .footer {
    background: transparent;
    border-top: 1px solid var(--sd-hairline);
    color: var(--sd-ink-3);
}

/* =========================================================
 * 8. 登录 / 注册页（body.signin）
 * ========================================================= */
body.signin {
    background: var(--sd-canvas) !important;
    position: relative;
}
body.signin .signinpanel {
    background: transparent !important;
    padding-top: 9%;
}
body.signin .signinpanel .form-control {
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    color: var(--sd-ink);
    height: 44px;
    margin-bottom: 14px;
    padding: 8px 14px;
}
body.signin .signinpanel .form-control:focus {
    border-color: var(--sd-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sd-primary) 15%, transparent);
}
body.signin .signinpanel form {
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: 16px;
    box-shadow: var(--sd-shadow-lg);
    color: var(--sd-ink);
    padding: 30px 32px 26px;
}
body.signin .signinpanel form h4,
body.signin .signinpanel form label,
body.signin .signinpanel h4 {
    color: var(--sd-ink);
}
body.signin .signinpanel form p,
body.signin .signinpanel .checkbox-custom label {
    color: var(--sd-ink-3);
}
body.signin .signin-info h1,
body.signin .signin-info h4,
body.signin .signin-info li,
body.signin .signin-info strong {
    color: var(--sd-ink);
}
body.signin .signin-info ul li {
    color: var(--sd-ink-3);
}
body.signin .signin-info ul li i {
    color: var(--sd-primary);
}
body.signin .signin-info strong a {
    color: var(--sd-primary);
}
body.signin .signup-footer,
body.signin .signup-footer a {
    color: var(--sd-ink-3);
}
body.signin .logopanel h1 {
    margin: 0 0 4px;
}
/* 文字品牌标识（登录/注册页） */
body .brand-logo {
    color: var(--sd-ink);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.5px;
    margin: 0;
}
body .brand-logo i {
    color: var(--sd-primary);
    margin-right: 8px;
}
body .brand-logo small {
    color: var(--sd-ink-3);
    display: block;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-top: 6px;
}

/* 注册页（body.signup）与 lock 页 */
body.signup {
    background: var(--sd-canvas) !important;
}
body.signup .signuppanel {
    background: transparent !important;
}
body.signup .signuppanel .form-control {
    background: var(--sd-surface);
    border-color: var(--sd-hairline);
    color: var(--sd-ink);
}

/* =========================================================
 * 9. 首页看板组件（main.html 专用类）
 * ========================================================= */
.db-welcome {
    background: linear-gradient(120deg, var(--sd-primary) 0%, color-mix(in srgb, var(--sd-primary) 72%, #000) 100%);
    border-radius: 14px;
    color: #fff;
    margin-bottom: 20px;
    padding: 26px 30px;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--sd-primary) 30%, transparent);
}
.db-welcome h2 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.2px;
    margin: 0 0 6px;
}
.db-welcome p {
    color: rgba(255, 255, 255, .82);
    margin: 0;
    font-size: 13px;
}
.db-stat-card {
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow);
    padding: 20px 22px;
    display: flex;
    align-items: center;
    transition: box-shadow .18s ease, transform .18s ease;
}
.db-stat-card:hover {
    box-shadow: var(--sd-shadow-lg);
    transform: translateY(-2px);
}
.db-stat-card .db-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-right: 15px;
    flex-shrink: 0;
    background: var(--sd-primary-soft);
    color: var(--sd-primary);
}
.db-stat-card .db-stat-meta h5 {
    color: var(--sd-ink-3);
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 4px;
}
.db-stat-card .db-stat-meta h2 {
    color: var(--sd-ink);
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.5px;
}
.db-panel {
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow);
    margin-bottom: 20px;
}
.db-panel .db-panel-title {
    align-items: center;
    border-bottom: 1px solid var(--sd-hairline);
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
}
.db-panel .db-panel-title h5 {
    color: var(--sd-ink);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}
.db-panel .db-panel-title a,
.db-panel .db-panel-title span.more {
    color: var(--sd-ink-3);
    font-size: 12px;
    text-decoration: none;
}
.db-panel .db-panel-title a:hover {
    color: var(--sd-primary);
}
.db-list {
    list-style: none;
    margin: 0;
    padding: 6px 8px;
}
.db-list li {
    align-items: center;
    border-radius: 8px;
    display: flex;
    padding: 9px 12px;
    transition: background .15s;
}
.db-list li:hover {
    background: var(--sd-primary-soft);
}
.db-list li + li {
    margin-top: 2px;
}
.db-list li .db-list-title {
    color: var(--sd-ink-2);
    flex: 1;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}
.db-list li .db-list-title:hover {
    color: var(--sd-primary);
}
.db-list li .db-list-time {
    color: var(--sd-ink-3);
    font-size: 12px;
    margin-left: 12px;
    flex-shrink: 0;
}
.db-list li .db-list-badge {
    background: var(--sd-primary-soft);
    border-radius: 4px;
    color: var(--sd-primary);
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    margin-right: 10px;
    padding: 2px 7px;
}
.db-quick-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    padding: 16px 18px;
}
.db-quick-item {
    align-items: center;
    border: 1px solid var(--sd-hairline);
    border-radius: 10px;
    color: var(--sd-ink-2);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    gap: 8px;
    padding: 14px 8px 12px;
    text-decoration: none;
    transition: all .15s ease;
}
.db-quick-item i {
    background: var(--sd-primary-soft);
    border-radius: 10px;
    color: var(--sd-primary);
    font-size: 16px;
    height: 38px;
    line-height: 38px;
    width: 38px;
}
.db-quick-item:hover {
    border-color: var(--sd-primary);
    color: var(--sd-primary);
    box-shadow: var(--sd-shadow);
}
@media (max-width: 768px) {
    .db-quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
 * 10. 主题适配补充：子菜单展开 / 内页组件
 * ========================================================= */

/* —— 子菜单容器（展开状态，各主题令牌化）—— */
body .navbar-default .nav li ul.nav-second-level,
body .navbar-default .nav li ul.nav-third-level,
body .navbar-default .nav li ul.nav-four-level {
    background: var(--sd-chrome-sub-bg);
}
body .navbar-default .nav ul.nav-second-level > li > a,
body .navbar-default .nav ul.nav-third-level > li > a,
body .navbar-default .nav ul.nav-four-level > li > a {
    color: var(--sd-chrome-sub-ink) !important;
}
body .navbar-default .nav ul.nav-second-level > li > a:hover,
body .navbar-default .nav ul.nav-third-level > li > a:hover,
body .navbar-default .nav ul.nav-four-level > li > a:hover,
body .navbar-default .nav ul.nav-second-level > li > a:focus,
body .navbar-default .nav ul.nav-third-level > li > a:focus,
body .navbar-default .nav ul.nav-four-level > li > a:focus {
    background: var(--sd-chrome-active-bg) !important;
    color: var(--sd-chrome-active-ink) !important;
}
body .navbar-default .nav ul.nav-second-level > li.active > a,
body .navbar-default .nav ul.nav-third-level > li.active > a,
body .navbar-default .nav ul.nav-four-level > li.active > a {
    background: var(--sd-chrome-active-bg) !important;
    color: var(--sd-chrome-active-ink) !important;
}
/* 子菜单左侧主题色指示条 */
body .navbar-default .nav ul.nav-second-level > li > a {
    border-left: 2px solid transparent;
}
body .navbar-default .nav ul.nav-second-level > li.active > a {
    border-left-color: var(--sd-chrome-active-ink);
}

/* 折叠悬浮态（mini-navbar）与 canvas-menu 容器背景令牌化 */
body.mini-navbar .nav-second-level,
body.canvas-menu.mini-navbar .nav-second-level,
body.fixed-sidebar.mini-navbar .nav li:hover > .nav-second-level {
    background: var(--sd-chrome-bg) !important;
}
body.mini-navbar .nav li:hover > .nav-second-level > li > a,
body.mini-navbar .nav li:hover > .nav-third-level > li > a {
    color: var(--sd-chrome-sub-ink) !important;
}
body.mini-navbar .nav li:hover > .nav-second-level > li > a:hover,
body.mini-navbar .nav li:hover > .nav-third-level > li > a:hover {
    background: var(--sd-chrome-active-bg) !important;
    color: var(--sd-chrome-active-ink) !important;
}

/* 各主题子菜单容器底色（略深/略浅于侧边栏，制造层次） */
body { --sd-chrome-sub-bg: #fbfcfe; --sd-chrome-sub-ink: #33415c; }
body.skin-stripe { --sd-chrome-sub-bg: #fbfcfe; --sd-chrome-sub-ink: #33415c; }
body.skin-linear { --sd-chrome-sub-bg: #141516; --sd-chrome-sub-ink: #a8adb7; }
body.skin-supabase { --sd-chrome-sub-bg: #202020; --sd-chrome-sub-ink: #9a9a9a; }
body.skin-vercel { --sd-chrome-sub-bg: #fafafa; --sd-chrome-sub-ink: #4d4d4d; }

/* —— 按钮语义色统一主题 —— */
/* 次要操作（导入/导出/重置等 warning 按钮）：浅主色底 + 主色文字 */
body .btn-warning {
    background: var(--sd-primary-soft);
    border-color: var(--sd-primary-soft);
    color: var(--sd-primary);
}
body .btn-warning:hover,
body .btn-warning:focus,
body .btn-warning:active,
body .btn-warning.active {
    background: var(--sd-primary);
    border-color: var(--sd-primary);
    color: var(--sd-on-primary, #fff);
}
body .btn-warning[disabled],
body .btn-warning.disabled {
    background: var(--sd-primary-soft);
    border-color: var(--sd-primary-soft);
    color: var(--sd-primary);
    opacity: .55;
}
/* 危险操作统一主题红 */
body .btn-danger {
    background: #e5484d;
    border-color: #e5484d;
}
body .btn-danger:hover,
body .btn-danger:focus,
body .btn-danger:active,
body .btn-danger.active {
    background: #d13b40;
    border-color: #d13b40;
}
/* 信息提示色（状态开关图标等）跟随主题 */
body .text-info {
    color: var(--sd-primary) !important;
}
body a.text-info:hover {
    color: var(--sd-primary-hover);
}

/* —— bootstrap-table 细节 —— */
body .fixed-table-container {
    border-color: var(--sd-hairline);
    border-radius: var(--sd-radius);
}
body .fixed-table-toolbar .columns > .btn {
    border-color: var(--sd-hairline);
    color: var(--sd-ink-2);
}
body .fixed-table-toolbar .columns > .btn:hover {
    background: var(--sd-primary-soft);
    border-color: var(--sd-primary);
    color: var(--sd-primary);
}
body .fixed-table-pagination .pagination-detail .page-list,
body .fixed-table-pagination div.pagination,
body .fixed-table-pagination .pagination-info {
    color: var(--sd-ink-3);
}
body .fixed-table-pagination .page-list .btn-group .btn {
    border-color: var(--sd-hairline);
    color: var(--sd-ink-2);
}

/* —— zTree 树组件（组织机构等）—— */
body .ztree li a,
body .ztree li span {
    color: var(--sd-ink-2);
}
body .ztree li a:hover {
    background: var(--sd-primary-soft);
    color: var(--sd-primary);
}
body .ztree li a.curSelectedNode {
    background: var(--sd-primary-soft);
    border-color: var(--sd-primary);
    border-radius: 6px;
    color: var(--sd-primary);
    opacity: 1;
}
body .ztree li span.button.ico_open,
body .ztree li span.button.ico_close {
    opacity: .75;
}

/* —— layer 弹窗 —— */
body .layui-layer {
    border-radius: 12px !important;
    overflow: hidden;
}
body .layui-layer-title {
    background: var(--sd-surface) !important;
    border-bottom: 1px solid var(--sd-hairline) !important;
    color: var(--sd-ink) !important;
    font-weight: 600;
}
body .layui-layer-setwin .layui-layer-close2 {
    background: var(--sd-ink-3);
}
body .layui-layer-btn a {
    border-radius: 8px !important;
    font-weight: 500;
}
body .layui-layer-btn .layui-layer-btn0 {
    background: var(--sd-primary) !important;
    border-color: var(--sd-primary) !important;
    color: var(--sd-on-primary, #fff) !important;
}
body .layui-layer-btn .layui-layer-btn1 {
    background: transparent;
    border-color: var(--sd-hairline) !important;
    color: var(--sd-ink-2) !important;
}
body .layui-layer-lan .layui-layer-title,
body .layui-layer-title {
    background: var(--sd-surface);
}

/* —— select2 / datetimepicker —— */
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
    border-color: var(--sd-hairline);
    border-radius: 8px;
}
body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--sd-primary);
}
body .select2-dropdown {
    border-color: var(--sd-hairline);
    border-radius: 8px;
}
body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--sd-primary);
    color: var(--sd-on-primary, #fff);
}
body .bootstrap-datetimepicker-widget table td.active,
body .bootstrap-datetimepicker-widget table td span.active {
    background: var(--sd-primary) !important;
    color: var(--sd-on-primary, #fff) !important;
}

/* —— 系统日志查看页 —— */
.syslog-panel {
    background: var(--sd-surface);
    border: 1px solid var(--sd-hairline);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow);
    margin-bottom: 16px;
}
.syslog-panel .syslog-head {
    align-items: center;
    border-bottom: 1px solid var(--sd-hairline);
    display: flex;
    justify-content: space-between;
    padding: 12px 18px;
}
.syslog-panel .syslog-head h5 {
    color: var(--sd-ink);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}
.syslog-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px 2px;
}
.syslog-file-tag {
    background: var(--sd-canvas);
    border: 1px solid var(--sd-hairline);
    border-radius: 8px;
    color: var(--sd-ink-2);
    cursor: pointer;
    font-size: 12px;
    padding: 5px 12px;
    transition: all .15s;
}
.syslog-file-tag:hover {
    border-color: var(--sd-primary);
    color: var(--sd-primary);
}
.syslog-file-tag.active {
    background: var(--sd-primary);
    border-color: var(--sd-primary);
    color: var(--sd-on-primary, #fff);
}
.syslog-toolbar {
    align-items: center;
    display: flex;
    gap: 8px;
    padding: 10px 18px;
}
.syslog-content {
    background: var(--sd-chrome-bg);
    border-top: 1px solid var(--sd-hairline);
    color: var(--sd-chrome-ink-strong);
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    line-height: 1.75;
    margin: 0;
    max-height: calc(100vh - 320px);
    min-height: 320px;
    overflow: auto;
    padding: 14px 18px;
    white-space: pre-wrap;
    word-break: break-all;
    border-radius: 0 0 var(--sd-radius) var(--sd-radius);
}
.syslog-empty {
    color: var(--sd-ink-3);
    padding: 40px;
    text-align: center;
}
/* 日志内容区内按日志级别着色 */
.syslog-line-error {
    color: #e5484d;
}
.syslog-line-warn {
    color: #f5a623;
}
.syslog-line-info {
    color: var(--sd-chrome-active-ink);
}