/* =====================================================================================
   看板主题（Kanban Theme）—— 框架类配色与质感的**全局唯一定义点**

   【怎么用】后续要改看板配色 / 背景 / 圆角 / 模糊，**只改本文件**。
     · 想换整体色调      → 改第 1 节「背景」
     · 想换面板/描边质感  → 改第 2 节「面」
     · 想换文字对比度    → 改第 3 节「文字」
     · 想换强调色体系    → 改第 4 节「强调色」
     · 想换圆角/毛玻璃   → 改第 5 节「质感」

   【为什么必须是「wwwroot 下的普通 css」而不是某个 .razor.css】
     Blazor 的 CSS 隔离会把 .razor.css 里的 `:root` 编译成 `:root[b-xxxx]`，
     而 <html> 上并没有这个 b-xxxx 属性 → 整条规则失效，**且不报任何错**，
     表现为所有 var(--kb-*) 静默回落、页面变成一片透明。
     wwwroot 下的普通 css 不参与隔离，所以这里写 :root 是安全的。
       （这是本项目反复踩过的坑，见 KanbanPanel.razor.css 顶部【铁律一】。）

   【为什么主题里没有开机率档位色】
     档位色是**业务口径**（会随行业、随考核标准调整），唯一数据源是
     Eajin.Platform.Application.Contracts 的 KanbanRateBands（前后端共用一张表）。
     主题只管「框架」：背景、面、描边、文字、强调色、圆角、模糊。
     两者的分界线：**换一套配色要改这里；换一套档位口径要改 KanbanRateBands。**

   【与本文件必须保持一致的那一处 C#】
     KanbanPalette 里的强调色常量（Cyan/Green/Amber/Red/Purple/Blue/Orange/Lime/Off）。
     它们必须是十六进制字面值，因为 C# 要用 ToRgba() 从色值算出半透明版
     （如色块的 30% 底 + 62% 描边）—— 而 `rgba(var(--x), .3)` 不是合法 CSS。
     校验脚本：scripts/kb_theme_check.py（对不上会直接报错）。

   【浏览器约束】车间广告机是 Chromium 71，**不能用 color-mix() / oklch() 等新函数**。
     所以本文件全部使用字面值 + var()，不派生颜色。
   ===================================================================================== */

:root {
    /* =================================================================================
       1. 背景
       深色科技风大屏：近黑底 + 三处低饱和径向光斑 + 四周暗角 + 极淡网格底纹。
       光斑是「高级感」的主要来源（去掉就会退化成一块死板的深灰），
       暗角负责把视线收拢到屏幕中央。
       ================================================================================= */
    --kb-bg: #04070e;
    --kb-bg2: #080f1c;

    /* 三处光斑（青 / 紫 / 绿）—— 只调这几个 rgba 就能整体换基调 */
    --kb-glow-1: rgba(34, 211, 238, .13);
    --kb-glow-2: rgba(167, 139, 250, .12);
    --kb-glow-3: rgba(34, 230, 160, .08);

    /* 网格底纹。压到 .05：再高会在深底上显脏，再低就看不见了 */
    --kb-grid: rgba(90, 150, 230, .05);

    /* 四周暗角。把屏幕边缘压暗，是「大屏感」的关键；不想要可改成 transparent */
    --kb-vignette: rgba(0, 0, 0, .52);

    /* =================================================================================
       2. 面（面板 / 内凹区 / 描边）
       ================================================================================= */
    --kb-panel: rgba(13, 22, 38, .66);
    --kb-panel2: rgba(9, 17, 30, .80);

    /* 内凹区：表头、输入框、下拉、条形底槽 —— 比面板更暗，制造"凹进去"的层次 */
    --kb-sunken: rgba(5, 10, 19, .72);

    /* 描边三档。
       ⚠️ 这三个值是**本轮专门调高过的**：原型上是 .16 / .45 / .10，
          实测在车间屏幕（亮度低、偏色）上几乎看不见分隔，卡片与背景糊成一片。
          提亮思路是「只动线和字，不动底」—— 保住深色大屏的观感。 */
    --kb-brd: rgba(90, 150, 230, .28);       /* 常规描边（原 .16） */
    --kb-brd-hi: rgba(110, 200, 255, .55);   /* 高亮/悬停描边（原 .45） */
    --kb-head-line: rgba(90, 150, 230, .20); /* 面板内分隔线（原 .10） */

    /* =================================================================================
       3. 文字（三级）
       ⚠️ 同样是本轮调高过的：原型 --muted #7d92b5 / --dim #4a5c7a，
          其中 #4a5c7a 在 #04070e 上对比度只有 **2.98:1**（WCAG AA 要求 4.5:1），
          表里的「覆盖 h / 看机人」这类次要数字基本读不出来 —— 这才是原来「不清晰」的真正原因。
          现在：dim → 6.4:1，muted → 10.4:1，都过 AA。
       ================================================================================= */
    --kb-txt: #e9f2ff;
    --kb-muted: #a8bcd6;   /* 次要文字、表头、KPI 标签（原 #7d92b5） */
    --kb-dim: #7d92b5;     /* 辅助说明、单位、脚注（原 #4a5c7a） */

    /* =================================================================================
       4. 强调色（chrome 用：KPI 图标、环形进度、竖条、激活态、状态徽标）
       ⚠️ 改动这里之后，必须同步改 KanbanPalette 里的同名常量（见文件头说明）。
       ================================================================================= */
    --kb-cyan: #22d3ee;
    --kb-green: #22e6a0;
    --kb-amber: #f5a524;
    --kb-orange: #ff8a3d;
    --kb-red: #ff4d6d;
    --kb-purple: #a78bfa;
    --kb-blue: #3b9dff;
    --kb-lime: #8fd44a;

    /* 「无数据 / 长期停用」的中性色。
       它同时出现在两处：CSS 侧（时间轴的无采样分段、抽屉里的灰块）与
       C# 侧（KanbanPalette.Off，写进内联 style，并参与 ToRgba 计算）。
       没有单一机制能同时覆盖两侧，所以这一个值在两边各存一份 —— 全站仅此一例，
       由 scripts/kb_theme_check.py 兜底校验。 */
    --kb-off: #5b6b85;

    /* =================================================================================
       5. 质感（圆角 / 毛玻璃）
       ================================================================================= */
    --kb-r: 14px;

    /* 毛玻璃强度标准位。
       ⚠️ 目前**没有任何组件在用** —— 车间集显小主机的 GPU 开销主要来自 backdrop-filter，
       实测下来性价比不划算，所以面板 / 顶栏 / 抽屉统一改用「半透明底 + 描边 + 顶部一线高光」
       来表现层次（见 KanbanPanel.razor.css 的 .kb-panel::before）。
       令牌保留在这里而不是删掉，是因为它是「模糊强度」这个概念的唯一定义点：
       哪天要重新开毛玻璃，只需给组件加 backdrop-filter: blur(var(--kb-blur))，
       而「关掉」的开关（.kb-lite）已经在下面写好了，不用再改两处。
       （原型网页版是有毛玻璃的；本 Blazor 看板刻意没有，这是性能取舍、不是漏做。） */
    --kb-blur: 8px;
}

/* =====================================================================================
   看板根容器：整页背景 + 网格纹理 + 暗角

   放在主题文件里（而不是各页面自己的 .razor.css），是为了让「换背景」只改一处。
   任何看板页只要根元素挂 .kb-root，就自动获得同一套背景。
   ===================================================================================== */

.kb-root {
    background:
        radial-gradient(1300px 660px at 10% -14%, var(--kb-glow-1), transparent 62%),
        radial-gradient(1100px 660px at 92% -6%, var(--kb-glow-2), transparent 62%),
        radial-gradient(1000px 760px at 50% 114%, var(--kb-glow-3), transparent 62%),
        linear-gradient(180deg, var(--kb-bg), var(--kb-bg2));
    background-attachment: fixed;
    color: var(--kb-txt);
    font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--kb-brd) transparent;
}

/* 网格底纹：只作「这是一块仪表盘」的肌理暗示。
   radial mask 让它在边缘渐隐，避免整屏都是格子显得脏。 */
.kb-root::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(var(--kb-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--kb-grid) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 86%);
    mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 86%);
}

/* 四周暗角 */
.kb-root::after {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle at 50% 42%, transparent 44%, var(--kb-vignette) 100%);
}

/* 根容器内的直接子元素都要盖在装饰层之上 */
.kb-root > * {
    position: relative;
    z-index: 1;
}

/* =====================================================================================
   简约模式（.kb-lite）
   给车间小主机 / 4K 大屏用：关掉"持续不断"的 GPU 开销，保留一次性过渡。
     · 背景底纹与暗角 → 隐藏（position:fixed 的大面积合成层，是这里最贵的一项）
     · 毛玻璃 → 强制关闭（令牌压成 0 + 对已启用它的元素再兜一道
       backdrop-filter:none，这样即便将来开了毛玻璃，本模式依然有效）
   ===================================================================================== */
.kb-lite {
    --kb-blur: 0px;
}

.kb-lite::before,
.kb-lite::after {
    display: none;
}

/* 特异性说明：组件样式表在本文件之后加载，`.kb-panel[b-xxxx]` 与本文件的
   `.kb-lite .kb-panel` 特异性相同 → 后来者胜，简约模式会被组件样式盖掉。
   所以这里把类名写两遍（.kb-lite.kb-lite）把特异性抬到 (0,3,0)，
   比组件的 (0,2,0) 高一级。比 !important 干净，也不需要组件配合。 */
.kb-lite.kb-lite .kb-top,
.kb-lite.kb-lite .kb-panel,
.kb-lite.kb-lite .kb-kpi,
.kb-lite.kb-lite .kb-drawer,
.kb-lite.kb-lite .kb-sel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}