/* ════════════════════════════════════════════════════════════════════
   stk-components-bridge.css
   ────────────────────────────────────────────────────────────────────
   作用：把 BlazorApp_KzApp/Components/ComponentsShared/ 下通用组件用到的
        --stk-* 变量映射到当前项目的 Phoenix 设计系统变量上。

   这样组件无需改动一行代码，配色/边框/字体自动跟随 Phoenix 主题（含
   light/dark 切换 —— Phoenix 用 [data-bs-theme] 切换主题时这些
   --phoenix-* 变量会自动更新，--stk-* 跟着更新）。

   还顺手"贴近主题"地覆写了几个组件里写死的颜色（#fff 之类），让暗色
   模式下不出现亮白色块。

   ⚠ 关于选择器加 body 前缀的说明：
   Blazor 的 .razor 文件里写的 <style> 块会被注入到 <body> 末尾，
   它的 CSS 规则比 <head> 里 <link> 引入的本文件加载更晚，同优先级
   时按"后出现的胜出"原则，会盖掉本文件里的覆写。
   解决：本文件里所有 class 级覆写一律前缀 `body `，把选择器优先级
   从 (0,0,1,0) 提升到 (0,0,1,1)，确保赢过组件 <style> 块。
   :root 块里的变量定义不需要这处理，因为没人竞争。
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* —— 颜色：主色 —— */
    --stk-primary-blue:         var(--phoenix-primary);
    --stk-primary-blue-hover:   var(--phoenix-primary-darker);

    /* —— 颜色：背景 —— */
    --stk-bg-white:             var(--phoenix-emphasis-bg);          /* 卡片/弹窗背景（暗色模式下=#141824） */
    --stk-bg-surface:           var(--phoenix-secondary-bg);         /* 输入框/表头底色 */

    /* —— 颜色：边框 —— */
    --stk-border-color:         var(--phoenix-border-color);

    /* —— 颜色：文字（按对比度阶梯） —— */
    --stk-slate-900:            var(--phoenix-emphasis-color);       /* 最强调（标题/重点） */
    --stk-slate-700:            var(--phoenix-body-highlight-color); /* 次强调 */
    --stk-slate-600:            var(--phoenix-body-color);           /* 正文 */
    --stk-slate-500:            var(--phoenix-tertiary-color);       /* 辅助/元数据 */
    --stk-slate-400:            var(--phoenix-quaternary-color);     /* 占位符/禁用 */

    /* —— 颜色：交互 —— */
    --stk-hover-overlay:        rgba(133, 169, 255, 0.08);            /* 主色 8% 透明，做 hover */

    /* —— 输入框 —— */
    --stk-input-bg:             var(--phoenix-emphasis-bg);
    --stk-input-bg-focus:       var(--phoenix-secondary-bg);
    --stk-input-border:         var(--phoenix-border-color);
    --stk-input-border-hover:   var(--phoenix-gray-500);
    --stk-input-border-focus:   var(--phoenix-primary);
    --stk-input-text:           var(--phoenix-emphasis-color);
    --stk-input-placeholder:    var(--phoenix-quaternary-color);
    --stk-input-icon:           var(--phoenix-quaternary-color);
    --stk-input-focus-ring:     0 0 0 0.25rem rgba(var(--phoenix-primary-rgb), 0.15);

    /* —— 阴影 —— */
    --stk-shadow-primary:       0 4px 14px rgba(var(--phoenix-primary-rgb), 0.25);
    --stk-shadow-primary-hover: 0 6px 18px rgba(var(--phoenix-primary-rgb), 0.35);
}

/* ════════════════════════════════════════════════════════════════════
   "贴近 Phoenix" 微调：覆写组件 <style> 块里写死的颜色
   （选择器都加 `body ` 前缀，确保优先级赢过组件内联 <style>）
   ──────────────────────────────────────────────────────────────────── */

/* Button：默认圆角太大（9999px 药丸形），项目里按钮都是 6px */
body .stk-btn {
    border-radius: var(--phoenix-border-radius, 0.375rem);
    font-family: var(--phoenix-body-font-family);
    font-weight: 600;
}

/* Pagination：按钮底色组件里写的是 #fff（亮色），暗色模式下要换 */
body .stk-pagination__btn {
    background: var(--phoenix-emphasis-bg);
}
body .stk-pagination__btn:hover:not(:disabled) {
    background: rgba(var(--phoenix-primary-rgb), 0.10);
}

/* Select：下拉面板组件里写死 #fff 背景 */
body .stk-select-dropdown {
    background: var(--phoenix-emphasis-bg);
    border: 1px solid var(--phoenix-border-color);
}
body .stk-select-option {
    color: var(--phoenix-body-color);
}
body .stk-select-option:hover,
body .stk-select-option:focus-visible {
    background: rgba(var(--phoenix-primary-rgb), 0.08);
    color: var(--phoenix-emphasis-color);
}
body .stk-select-option.is-selected {
    background: rgba(var(--phoenix-primary-rgb), 0.18);
    color: var(--phoenix-primary);
}

/* Modal：弹窗容器边框稍弱化（Phoenix 卡片一般不带强阴影） */
body .stk-dialog-container {
    border: 1px solid var(--phoenix-border-color);
}

/* Loading overlay：组件里是亮色蒙板，暗色模式应改成深色 */
body .stk-loading--overlay {
    background: rgba(15, 17, 26, 0.65);
}

/* ════════════════════════════════════════════════════════════════════
   SystemEventLog 查看页：贴近主题
   ──────────────────────────────────────────────────────────────────── */

/* 内容卡片：用 secondary-bg 比 emphasis-bg 更亮一档，跟 body-bg 对比够 */
body .syslog-content {
    background: var(--phoenix-secondary-bg);
    border: 1px solid var(--phoenix-border-color);
    box-shadow: var(--phoenix-box-shadow);
}

/* 表格行 hover */
body .syslog-table tbody tr:hover {
    background: rgba(var(--phoenix-primary-rgb), 0.06);
}

/* 表头底色比卡片再亮一档（卡片用 secondary-bg，表头用 quaternary-bg） */
body .syslog-table thead th {
    background: var(--phoenix-quaternary-bg);
}

/* 详情弹窗内 trace-row 写死 #fff */
body .syslog-trace-row {
    background: transparent;
}
body .syslog-trace-row.is-current {
    background: rgba(var(--phoenix-primary-rgb), 0.08);
}

/* 等级徽章：组件用的是亮色 #2563eb / #dc2626 等，暗色模式下饱和过高
   改用 Phoenix 的暗色阶颜色，保持视觉层次但对比度合适 */
body .syslog-badge--info {
    background: rgba(var(--phoenix-info-rgb), 0.15);
    color: var(--phoenix-info);
}
body .syslog-badge--success {
    background: rgba(var(--phoenix-success-rgb), 0.15);
    color: var(--phoenix-success);
}
body .syslog-badge--warning {
    background: rgba(var(--phoenix-warning-rgb), 0.15);
    color: var(--phoenix-warning);
}
body .syslog-badge--error {
    background: rgba(var(--phoenix-danger-rgb), 0.15);
    color: var(--phoenix-danger);
}

/* StackTrace / ExtJson 的代码框 */
body .syslog-detail__pre {
    background: var(--phoenix-secondary-bg);
    border: 1px solid var(--phoenix-border-color);
    color: var(--phoenix-emphasis-color);
}

/* Exception 块的红色背景在暗色下要降饱和 */
body .syslog-detail__exception {
    background: rgba(var(--phoenix-danger-rgb), 0.08);
    border: 1px solid rgba(var(--phoenix-danger-rgb), 0.25);
}
body .exc-label {
    color: var(--phoenix-danger);
}

/* TraceId 链路按钮 */
body .syslog-detail__trace-btn {
    color: var(--phoenix-primary);
    border-color: var(--phoenix-primary);
}
body .syslog-detail__trace-btn:hover:not(:disabled) {
    background: rgba(var(--phoenix-primary-rgb), 0.10);
}
