/**
 * YLB Soybean Theme Layer（方案 D · v2 修复版）
 * 原则：只改颜色/圆角/阴影/字体，不改宽度/边距等布局，避免与 ylb.css 紧凑模式冲突
 * 必须在 ylb.css 之后加载（见 getNavList.js / 登录页 link 标签）
 */

:root {
    --ylb-primary: #646cff;
    --ylb-primary-hover: #535bf2;
    --ylb-primary-pressed: #4a54e8;
    --ylb-primary-suppl: rgba(100, 108, 255, 0.1);
    --ylb-primary-suppl-hover: rgba(100, 108, 255, 0.16);

    --ylb-text-1: #333639;
    --ylb-text-2: #666666;
    --ylb-text-3: #999999;

    --ylb-border: rgba(0, 0, 0, 0.09);
    --ylb-divider: rgba(0, 0, 0, 0.06);

    --ylb-body-color: #f4f6f8;
    --ylb-card-color: #ffffff;
    --ylb-hover-color: rgba(0, 0, 0, 0.04);

    --ylb-border-radius: 8px;
    --ylb-border-radius-sm: 6px;
    --ylb-border-radius-lg: 12px;

    --ylb-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

    --ylb-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
    --ylb-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.06);
    --ylb-shadow-3: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ========== 全局（不改布局尺寸） ========== */
body.ylb-ui-soybean {
    background: var(--ylb-body-color);
    font-family: var(--ylb-font-family);
    color: var(--ylb-text-1);
}

body.ylb-ui-soybean #app textarea,
body.ylb-ui-soybean #app input,
body.ylb-ui-soybean #app select,
body.ylb-ui-soybean #app button {
    font-family: inherit;
}

/* ========== 侧边栏（保留原 230px / 280px 布局） ========== */
body.ylb-ui-soybean #app .left {
    background: var(--ylb-card-color);
    border-right: 1px solid var(--ylb-border);
    box-shadow: none;
}

body.ylb-ui-soybean #app .left .dhview ul li:hover {
    background: var(--ylb-hover-color);
}

body.ylb-ui-soybean #app .left .dhview a {
    color: var(--ylb-text-1);
}

body.ylb-ui-soybean #app .left .dhview .selected {
    color: var(--ylb-primary);
    background: var(--ylb-primary-suppl);
    font-weight: 500;
}

body.ylb-ui-soybean #app .left .account {
    background: var(--ylb-hover-color);
    border: 1px solid var(--ylb-divider);
    border-radius: var(--ylb-border-radius);
}

body.ylb-ui-soybean #app .left .account .version {
    color: var(--ylb-text-3);
}

body.ylb-ui-soybean #app .left .account .user_name {
    color: var(--ylb-text-2);
}

body.ylb-ui-soybean #app .left .account .user_name .exitLogin {
    color: var(--ylb-primary);
}

body.ylb-ui-soybean #app .sidebar-toggle {
    border-color: var(--ylb-border);
    box-shadow: var(--ylb-shadow-1);
}

body.ylb-ui-soybean #app .sidebar-toggle:hover {
    color: var(--ylb-primary);
    border-color: var(--ylb-primary-suppl-hover);
    background: var(--ylb-primary-suppl);
}

/* ========== 主内容区（不改 margin-left / data-card 宽度） ========== */
body.ylb-ui-soybean #right h3,
body.ylb-ui-soybean #right h4 {
    color: var(--ylb-text-1);
}

body.ylb-ui-soybean #right .mbx {
    color: var(--ylb-text-3);
}

/* 列表页卡片：只改视觉，保留 calc(100% - 60px) */
body.ylb-ui-soybean #right .data-card:not(.dash-wrap) {
    background: var(--ylb-card-color);
    border: 1px solid var(--ylb-border);
    border-radius: var(--ylb-border-radius-lg);
    box-shadow: var(--ylb-shadow-1);
}

body.ylb-ui-soybean #right .data-card .data-chart .warnPage,
body.ylb-ui-soybean #right .data-card .data-chart .errorPage {
    border: 1px solid var(--ylb-border);
    box-shadow: var(--ylb-shadow-1);
}

/* 首页 dash 页保持 index.css 控制，不覆盖背景 */
body.ylb-ui-soybean #right.dash-page {
    background: var(--dash-bg, #f0f2f8);
}

/* ========== 按钮（兼容紧凑模式：用更高优先级选择器） ========== */
body.ylb-ui-soybean #app .default-btn,
body.ylb-ui-soybean.ylb-list-compact #app .default-btn,
body.ylb-ui-soybean.ylb-dwz-compact #app .default-btn {
    background: var(--ylb-primary);
    border: 1px solid var(--ylb-primary);
    color: #fff;
}

body.ylb-ui-soybean #app .default-btn:hover,
body.ylb-ui-soybean.ylb-list-compact #app .default-btn:hover,
body.ylb-ui-soybean.ylb-dwz-compact #app .default-btn:hover {
    background: var(--ylb-primary-hover);
    border-color: var(--ylb-primary-hover);
}

body.ylb-ui-soybean #app .tint-btn,
body.ylb-ui-soybean.ylb-list-compact #app .tint-btn,
body.ylb-ui-soybean.ylb-dwz-compact #app .tint-btn {
    color: var(--ylb-text-2);
    background: var(--ylb-card-color);
    border: 1px solid var(--ylb-border);
}

body.ylb-ui-soybean #app .tint-btn:hover,
body.ylb-ui-soybean.ylb-list-compact #app .tint-btn:hover,
body.ylb-ui-soybean.ylb-dwz-compact #app .tint-btn:hover {
    color: var(--ylb-primary);
    background: var(--ylb-primary-suppl);
    border-color: var(--ylb-primary-suppl-hover);
}

/* ========== 标签 / 表格 ========== */
body.ylb-ui-soybean #right .dark-tag {
    color: var(--ylb-primary);
    background: var(--ylb-primary-suppl);
}

body.ylb-ui-soybean #right .data-card .data-list thead {
    background: #fafafa;
}

body.ylb-ui-soybean #right .data-card .data-list thead th {
    color: var(--ylb-text-2);
    font-weight: 500;
    border-bottom: 1px solid var(--ylb-border);
}

body.ylb-ui-soybean #right .data-card .data-list tbody tr:hover {
    background: var(--ylb-hover-color);
}

/* ========== 下拉 / 弹窗 ========== */
body.ylb-ui-soybean #app .dropdown .dropdown-menu {
    border: 1px solid var(--ylb-border);
    border-radius: var(--ylb-border-radius);
    box-shadow: var(--ylb-shadow-2);
}

body.ylb-ui-soybean #app .dropdown .dropdown-menu .dropdown-item:hover {
    background: var(--ylb-hover-color);
    color: var(--ylb-text-1);
}

body.ylb-ui-soybean .modal-content {
    border: 1px solid var(--ylb-border);
    border-radius: var(--ylb-border-radius-lg);
    box-shadow: var(--ylb-shadow-3);
}

body.ylb-ui-soybean .modal-header {
    border-bottom: 1px solid var(--ylb-divider);
}

body.ylb-ui-soybean .modal-footer {
    border-top: 1px solid var(--ylb-divider);
}

body.ylb-ui-soybean .form-control:focus {
    border-color: var(--ylb-primary);
    box-shadow: 0 0 0 2px var(--ylb-primary-suppl);
}

body.ylb-ui-soybean #topAlert {
    color: var(--ylb-primary);
    background: var(--ylb-primary-suppl);
    border-bottom: 1px solid var(--ylb-divider);
}

/* ========== 登录页 ========== */
body.ylb-ui-soybean.ylb-login-soybean {
    background: linear-gradient(135deg, #f4f6f8 0%, #e8ecf4 50%, #dfe4f0 100%) !important;
    min-height: 100vh;
}

body.ylb-ui-soybean #app .formBox,
body.ylb-ui-soybean #app .formBox_install {
    border: 1px solid var(--ylb-border);
    border-radius: var(--ylb-border-radius-lg);
    box-shadow: var(--ylb-shadow-2);
}

body.ylb-ui-soybean #app .formBox .line {
    border-bottom-color: var(--ylb-divider);
}

body.ylb-ui-soybean #app .formBox .form-box label {
    color: var(--ylb-text-2);
    font-weight: 500;
}

body.ylb-ui-soybean #app .formBox .form-box .form-control {
    border: 1px solid var(--ylb-border);
    color: var(--ylb-text-1);
}

body.ylb-ui-soybean #app .formBox .form-box .form-control:focus {
    border-color: var(--ylb-primary);
    box-shadow: 0 0 0 2px var(--ylb-primary-suppl);
}

body.ylb-ui-soybean #app .formBox .form-box .form-control-login {
    background: var(--ylb-primary);
    border-radius: var(--ylb-border-radius-sm);
}

body.ylb-ui-soybean #app .formBox .form-box .form-control-login:hover {
    background: var(--ylb-primary-hover);
}

body.ylb-ui-soybean #app .formBox .form-box .links .link {
    color: var(--ylb-text-3);
}

body.ylb-ui-soybean #app .formBox .form-box .links .link:hover {
    color: var(--ylb-primary);
    text-decoration: none;
}

body.ylb-ui-soybean #app .loginresult .success {
    color: var(--ylb-primary);
}

body.ylb-ui-soybean .nav-tag.selected {
    color: var(--ylb-primary);
    background: var(--ylb-primary-suppl);
}