/* ============================================================
   蜂巢API 完整品牌风格覆盖 v2 (DESIGN.md 规范)
   Brand Blue: #1868db |  Light Blue BG: #e9f2fe
   问题：New API 用 React + 哈希类名 + 内联 style
   方案：用最高优先级（内联 style > !important > specificity）
   ============================================================ */

/* ---------- 全局字体 ---------- */
html body, body, .semi-app { font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif !important; }

/* ---------- 强制清除 New API 内联颜色（最高优先级） ---------- */
/* 清除所有内联 color */
html body [style*="color:"],
html body button[style*="color"],
html body .semi-button[style*="color"],
html body [class][style*="color: rgb"] {
    color: inherit !important;
}

/* ============================================================
   1. 左侧导航栏（完整覆盖 — 高优先级版本）
   ============================================================ */
html body .app-sider,
html body #root .app .app-sider,
html body .layout-sider {
    background: #ffffff !important;
    border-right: 1px solid #eeeeee !important;
}
/* 普通项 */
html body .app-sider .semi-navigation-item,
html body .semi-navigation-item {
    border-radius: 8px !important;
    margin: 2px 8px !important;
    color: #292a2e !important;
    transition: background 0.2s, color 0.2s !important;
}
html body .app-sider .semi-navigation-item:hover,
html body .semi-navigation-item:hover {
    background-color: rgba(24,104,219,0.06) !important;
    color: #1868db !important;
}
/* 选中/激活项 — 品牌蓝背景 + 白色文字 */
html body .app-sider .semi-navigation-item-selected,
html body .app-sider .semi-navigation-item-active,
html body .semi-navigation-item[aria-selected="true"],
html body .semi-navigation-item.semi-navigation-item-selected {
    background-color: #1868db !important;
    color: #ffffff !important;
    fill: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(24,104,219,0.25) !important;
}
/* 强制子元素白色 */
html body .app-sider .semi-navigation-item-selected *,
html body .app-sider .semi-navigation-item-active *,
html body .semi-navigation-item-selected *,
html body .semi-navigation-item-active * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ============================================================
   2. 按钮系统（完整覆盖 — 全类型强制白色文字）
   ============================================================ */

/* Primary 按钮 — 品牌蓝 + 白色文字 */
html body .semi-button-primary,
html body button.semi-button-primary,
html body button[class*="primary"],
html body .semi-button[class*="primary"],
html body .semi-button.btn-primary,
html body .semi-btn-primary {
    background-color: #1868db !important;
    border-color: #1868db !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 3px rgba(24,104,219,0.3) !important;
    transition: all 0.2s !important;
}
html body .semi-button-primary:hover,
html body button.semi-button-primary:hover {
    background-color: #1558b8 !important;
    border-color: #1558b8 !important;
    box-shadow: 0 4px 12px rgba(24,104,219,0.4) !important;
    transform: translateY(-1px) !important;
}

/* Secondary / Default 按钮 */
html body .semi-button-default,
html body button.semi-button-default,
html body .semi-button:not(.semi-button-primary):not(.semi-button-danger):not(.semi-button-text):not(.semi-button-tertiary) {
    background-color: #ffffff !important;
    border-color: #e5e5e5 !important;
    color: #292a2e !important;
    border-radius: 8px !important;
    transition: all 0.2s !important;
}
html body .semi-button-default:hover {
    background-color: #f9f9fb !important;
    border-color: #1868db !important;
    color: #1868db !important;
}

/* Tertiary / Light 按钮 */
html body .semi-button-tertiary {
    background-color: #e9f2fe !important;
    border-color: transparent !important;
    color: #1868db !important;
    border-radius: 8px !important;
}
html body .semi-button-tertiary:hover {
    background-color: #d0e4fc !important;
}

/* Danger 按钮 */
html body .semi-button-danger,
html body button.semi-button-danger {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}
html body .semi-button-danger:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* Text 按钮 */
html body .semi-button-text {
    color: #1868db !important;
    border-radius: 8px !important;
}
html body .semi-button-text:hover {
    background-color: rgba(24,104,219,0.06) !important;
}

/* 所有按钮内的文字强制白色（防止内联 style 覆盖） */
html body .semi-button-primary span,
html body .semi-button-primary div,
html body .semi-button-primary i,
html body .semi-button-primary svg,
html body .semi-button-primary strong,
html body .semi-button-primary p,
html body .semi-button-primary .semi-button-text,
html body .semi-button-primary .semi-icon,
html body .semi-button-primary::after,
html body .semi-button-primary::before {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* disabled 状态 */
html body .semi-button-disabled,
html body .semi-button[disabled] {
    background-color: #f5f5f5 !important;
    border-color: #e5e5e5 !important;
    color: #7d818a !important;
    cursor: not-allowed !important;
}

/* ============================================================
   3. 输入框 / 文本域
   ============================================================ */
html body .semi-input,
html body .semi-textarea {
    border-radius: 8px !important;
    border-color: #e5e5e5 !important;
    transition: all 0.2s !important;
}
html body .semi-input:hover,
html body .semi-textarea:hover {
    border-color: #1868db !important;
}
html body .semi-input:focus,
html body .semi-textarea:focus,
html body .semi-input-focused,
html body .semi-textarea-focused {
    border-color: #1868db !important;
    box-shadow: 0 0 0 3px rgba(24,104,219,0.15) !important;
}

/* ============================================================
   4. 复选框 / 单选框
   ============================================================ */
html body .semi-checkbox-checked .semi-checkbox-inner,
html body .semi-checkbox-indeterminate .semi-checkbox-inner {
    background-color: #1868db !important;
    border-color: #1868db !important;
}
html body .semi-radio-checked .semi-radio-inner {
    border-color: #1868db !important;
}
html body .semi-radio-checked .semi-radio-inner::after {
    background-color: #1868db !important;
}

/* ============================================================
   5. 开关 Switch
   ============================================================ */
html body .semi-switch-checked {
    background-color: #1868db !important;
    box-shadow: 0 2px 8px rgba(24,104,219,0.3) !important;
}

/* ============================================================
   6. 下拉选择
   ============================================================ */
html body .semi-select-option-selected {
    background-color: #e9f2fe !important;
    color: #1868db !important;
    font-weight: 500 !important;
}
html body .semi-select-option:hover {
    background-color: #f9f9fb !important;
}
html body .semi-select-selector {
    border-radius: 8px !important;
}
html body .semi-select-focused .semi-select-selector {
    border-color: #1868db !important;
    box-shadow: 0 0 0 3px rgba(24,104,219,0.15) !important;
}

/* ============================================================
   7. 表格
   ============================================================ */
html body .semi-table {
    border-radius: 12px !important;
    overflow: hidden !important;
}
html body .semi-table-thead > tr > th {
    background-color: #f9f9fb !important;
    color: #292a2e !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #1868db !important;
}
html body .semi-table-tbody > tr:hover > td {
    background-color: #e9f2fe !important;
}
html body .semi-table-row-selected > td,
html body .semi-table-row-selected:hover > td {
    background-color: rgba(24,104,219,0.06) !important;
}
html body .semi-table-tbody .semi-table-row-selected td:first-child {
    border-left: 3px solid #1868db !important;
}

/* ============================================================
   8. 分页器
   ============================================================ */
html body .semi-pagination-item-active {
    background-color: #1868db !important;
    border-color: #1868db !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}
html body .semi-pagination-item:hover:not(.semi-pagination-item-active) {
    color: #1868db !important;
    border-color: #1868db !important;
}

/* ============================================================
   9. 标签页 Tabs
   ============================================================ */
html body .semi-tabs-tab-selected {
    color: #1868db !important;
    font-weight: 600 !important;
}
html body .semi-tabs-tab:hover {
    color: #1868db !important;
}
html body .semi-tabs-bar {
    border-bottom-color: #eeeeee !important;
}

/* ============================================================
   10. 模态框 / 抽屉
   ============================================================ */
html body .semi-modal-content,
html body .semi-drawer-content {
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}
html body .semi-modal-header,
html body .semi-drawer-header {
    border-bottom: 1px solid #eeeeee !important;
}

/* ============================================================
   11. 头部导航栏
   ============================================================ */
html body header.sticky,
html body .app-header {
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
html body header a:hover,
html body header button:hover {
    color: #1868db !important;
}
html body header img,
html body .app-header img {
    border-radius: 8px !important;
}

/* ============================================================
   12. 卡片
   ============================================================ */
html body .semi-card {
    border-radius: 12px !important;
    border: 1px solid #eeeeee !important;
    transition: all 0.2s !important;
}
html body .semi-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    transform: translateY(-2px) !important;
}

/* ============================================================
   13. 页脚
   ============================================================ */
html body footer {
    background: #ffffff !important;
    border-top: 1px solid #eeeeee !important;
}
html body .custom-footer a {
    color: #7d818a !important;
}
html body .custom-footer a:hover {
    color: #1868db !important;
}

/* ============================================================
   14. DEBUG 标记
   ============================================================ */
html body::before {
    content: "✅ brand.css v2 loaded | priority: MAX";
    position: fixed;
    top: 40px;
    right: 10px;
    background: #1868db;
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    z-index: 99999;
    font-family: monospace;
}