/* 图表分类色板
 *
 * 放**不跟 daisyUI 主题走**的那部分配色：分类色。
 *
 * **为什么单独一套**：daisyUI 给的是**语义色**（success/warning/error/primary...），
 * 不是为「一组并列的分类」设计的 —— 几个语义色亮度从 14% 到 77% 不等，直接拼起来
 * 当分类色有三种毛病：柱子深浅不一（视觉重量和数值无关）、品牌色两两撞车、有个色
 * 近黑看着像「没有数据」。常规 SaaS 图表的做法是**分类色由设计定一套**（相邻色相
 * 拉开、亮度接近），只让**明暗**跟随界面。
 *
 * **明暗怎么跟随**：daisyUI 的每个主题都声明了 ``color-scheme``（35 套里 14 深
 * 21 浅），所以用 ``light-dark()`` 一处声明就行 —— 浅色主题取第一个值、深色主题取
 * 第二个，换主题时自动翻，**不用重绘图表**（和语义色一样是纯 CSS 行为）。
 *
 * 选择器带上 ``[data-theme]``，是为了主题挂在下级元素（而不只是 ``<html>``）时也能
 * 解析对。
 *
 * **语义色不在这里**：业务配了档位的图仍然用 daisyUI 的主题色
 * （见 ``component/data/chart/common.py`` 的 ``LEVEL_COLOR_NAMES``），和界面语言
 * 一致；只有**没配档位**的取值才落到这套分类色。
 *
 * 色值取 Ant Design Charts / G2 的默认分类色（国内中台的常规配色）。深色那列整体
 * 提亮，压在深底上才跳得出来。
 */

:root,
[data-theme] {
    --chart-cat-1: light-dark(#5b8ff9, #7ba9ff);
    --chart-cat-2: light-dark(#5ad8a6, #6fe0b4);
    --chart-cat-3: light-dark(#f6bd16, #ffce45);
    --chart-cat-4: light-dark(#e8684a, #ff8a68);
    --chart-cat-5: light-dark(#9270ca, #ac8fe0);
    --chart-cat-6: light-dark(#6dc8ec, #8adcf0);

    /* 压在这几个分类色上的文字色。
     *
     * 它们是中间调，深色墨在浅底和深底上都够读（对比度最低 5.3:1），所以明暗共用
     * 一个值 —— 语义色有 daisyUI 配好的 ``-content``，分类色没有，得自己定一个。
     */
    --chart-cat-ink: #15181d;

    /* 未填写分类保留份额，以中性灰与有效分类区分 */
    --chart-missing: light-dark(#cbd5e1, #a8b5c8);
}

/* 自适应绘图区由卡片分配尺寸，不让 SVG 上一次的固有尺寸撑大卡片。
 * 固定高度图表不带 h-vega-fill；表格等内容仍通过正常布局决定卡片高度。
 */
.h-chart-body:has(.h-vega-fill) {
    contain: size;
}

/* 按卡片绘图区的实际宽度摆图例，避免窄卡片挤压饼图。 */
.h-chart-body {
    container-type: inline-size;
}

.h-count-arc {
    flex-direction: column;
}

.h-count-legend {
    width: 100%;
}

@container (min-width: 360px) {
    .h-count-arc {
        flex-direction: row;
    }

    .h-count-legend {
        width: 170px;
    }
}