/* 管理员「数据看板」（board.js）的样式。公共部分用 uc.css 的类，这里只放统计卡、条形图、SVG 图表。
   颜色用 --uc-* 令牌；图表系列色 --bd-* 在浅色 / 深色下各自定义，保证两种模式都清楚可读。 */

#panel-board {
    --bd-primary: #4f7cf0;
    --bd-ok: #1f9d55;
    --bd-warn: #d98a00;
    --bd-bad: #e5484d;
    --bd-info: #0ea5c9;
    --bd-purple: #9b5de5;
    --bd-line: #e08a00;
    --bd-track: #e9e9ef;
}
@media (prefers-color-scheme: dark) {
    #panel-board {
        --bd-primary: #7aa2ff;
        --bd-ok: #4cc37f;
        --bd-warn: #f0b13a;
        --bd-bad: #ff7a80;
        --bd-info: #4cc9ee;
        --bd-purple: #b98af2;
        --bd-line: #f0b13a;
        --bd-track: #3a3a46;
    }
}


/* 标题栏：标题在左，更新时间与刷新按钮在右 */
.bd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.bd-tools { display: flex; align-items: center; gap: 12px; }
.bd-updated { font-size: 13px; color: var(--uc-muted); }
.bd-tools .uc-btn .icon { width: 14px; height: 14px; margin-right: 4px; }

.bd-page { display: grid; gap: 16px; }
.bd-error { display: flex; align-items: center; gap: 10px; }
.bd-error[hidden], .bd-error:not(:has(:not([hidden]))) { display: none; }
.bd-error .uc-msg { flex: 1; }
.bd-body { display: grid; gap: 16px; min-width: 0; }
.bd-body > * { min-width: 0; }
.bd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bd-grid > * { min-width: 0; }

.bd-card { display: flex; flex-direction: column; gap: 12px; }
.bd-card > .uc-card-title, .bd-card > .uc-card-desc { margin: 0; }
.bd-sub { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--uc-muted); }
.bd-note { margin: 0; font-size: 13px; }
.bd-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-body .uc-empty { padding: 24px 0; }

/* 统计数字卡 */
.bd-stat { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; min-width: 0; }
.bd-stat-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--uc-muted); }
.bd-stat-value { font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--uc-text); overflow-wrap: anywhere; }
.bd-stat-sub { font-size: 12px; line-height: 1.5; color: var(--uc-muted); }

.bd-pairs { display: grid; gap: 8px; }
.bd-pairs.bd-inline { grid-template-columns: minmax(0, 1fr); }
.bd-pair { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--uc-muted); }
.bd-pair strong { font-size: 14px; font-weight: 600; color: var(--uc-text); text-align: right; }

/* 条形图 */
.bd-hbars { display: grid; gap: 10px; }
.bd-hbar { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.bd-hbar-label { color: var(--uc-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-hbar-value { min-width: 44px; text-align: right; font-weight: 600; color: var(--uc-text); white-space: nowrap; }
.bd-track { display: block; width: 100%; height: 12px; border-radius: 999px; background: var(--bd-track); overflow: hidden; }

/* 系列色：SVG 图形用 fill，图例色块用 background */
.bd-f-primary, .bd-c-primary { fill: var(--bd-primary); }
.bd-f-ok { fill: var(--bd-ok); }
.bd-f-warn { fill: var(--bd-warn); }
.bd-f-bad { fill: var(--bd-bad); }
.bd-f-info { fill: var(--bd-info); }
.bd-f-purple { fill: var(--bd-purple); }
.bd-sw { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; }
.sw-primary { background: var(--bd-primary); }
.sw-ok { background: var(--bd-ok); }
.sw-warn { background: var(--bd-warn); }
.sw-bad { background: var(--bd-bad); }
.sw-info { background: var(--bd-info); }
.sw-purple { background: var(--bd-purple); }
.sw-line { background: var(--bd-line); }

.bd-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--uc-muted); }
.bd-legend li { display: inline-flex; align-items: center; gap: 6px; }
.bd-legend b { color: var(--uc-text); font-weight: 600; }

/* SVG 图表 */
.bd-svg { display: block; width: 100%; max-width: 720px; height: auto; }
.bd-svg.bd-small { max-width: 420px; }
.bd-axis { stroke: var(--uc-border); stroke-width: 1; }
.bd-grid-line { stroke: var(--uc-divider); stroke-width: 1; }
.bd-lab { font-size: 10.5px; fill: var(--uc-muted); }
.bd-lab.bd-users-lab { fill: var(--bd-line); }
.bd-val { font-size: 10px; font-weight: 600; fill: var(--uc-text-2); }
.bd-line { stroke: var(--bd-line); stroke-width: 2; stroke-linejoin: round; }
.bd-dot { fill: var(--uc-card); stroke: var(--bd-line); stroke-width: 2; }

/* 许可密钥四宫格 */
.bd-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bd-quad-cell { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 12px; background: var(--uc-notice); }
.bd-quad-cell strong { font-size: 20px; font-weight: 700; color: var(--uc-text); }
.bd-quad-cell span { font-size: 12px; color: var(--uc-muted); }

/* 角色标签与最近用户表 */
.uc-badge.bd-bad { background: var(--uc-danger-soft); color: var(--uc-danger); }
.uc-badge.bd-root { background: rgba(155, 93, 229, 0.16); color: var(--bd-purple); }
.bd-users td { padding: 10px 12px; }
.bd-users td:first-child { max-width: 220px; }
.bd-user-name { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-user-sub { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-users th:last-child, .bd-users td:last-child { text-align: right; }
.bd-users td:nth-child(2) { text-align: left; }

@media (min-width: 640px) {
    .bd-pairs.bd-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .bd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bd-pairs.bd-inline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}