/**
 * 卡片视图图表和标签样式
 * 包含网络质量迷你图表、流量进度条、标签编辑器等样式
 * 原因：外置内联样式，优化首屏加载性能
 * 相关文件：views/stats/card.html
 */

/* ========== 网络质量迷你图表样式 - 竖条版 ========== */
.latency-mini-chart,
.packet-loss-mini-chart,
.network-quality-mini-chart {
    display: flex;
    align-items: center;
    gap: 1px; /* 统一使用gap管理间距 */
    height: 10px; /* 调整容器高度适配6px竖条 */
    width: 100%;
    max-width: 100%;
    min-width: 0; /* 防止flex子项溢出 */
    overflow: hidden; /* 防止溢出 */
    padding: 2px 0;
    /* ✅ 性能优化：限制内部重排影响范围，避免24条柱子变化时触发外层重排 */
    contain: layout paint;
}

/* Canvas 迷你图样式 */
.mini-chart-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* 延迟图颜色 Token */
.latency-mini-chart {
    --mini-latency-good: var(--color-network-quality-good);
    --mini-latency-warn: var(--color-network-quality-warning);
    --mini-latency-bad: var(--color-network-quality-critical);
    --mini-latency-empty: color-mix(in srgb, var(--color-network-quality-no-data) 40%, transparent);
}

/* 丢包图颜色 Token */
.packet-loss-mini-chart {
    --mini-packet_loss-good: var(--color-network-quality-good);
    --mini-packet_loss-warn: var(--color-network-quality-warning);
    --mini-packet_loss-bad: var(--color-network-quality-critical);
    --mini-packet_loss-empty: color-mix(in srgb, var(--color-network-quality-no-data) 40%, transparent);
}

/* NetworkQualitySeverity 只产出 data 状态；颜色统一由这里解释。 */
.network-quality-severity-fill[data-network-quality-severity="no-data"] {
    background-color: color-mix(in srgb, var(--color-network-quality-no-data) 40%, transparent);
}

.network-quality-severity-fill[data-network-quality-severity="good"] {
    background-color: var(--color-network-quality-good);
}

.network-quality-severity-fill[data-network-quality-severity="warning"] {
    background-color: var(--color-network-quality-warning);
}

.network-quality-severity-fill[data-network-quality-severity="critical"] {
    background-color: var(--color-network-quality-critical);
}

.network-quality-severity-text[data-network-quality-severity="no-data"] {
    color: var(--color-network-quality-no-data);
}

.network-quality-severity-text[data-network-quality-severity="good"] {
    color: var(--color-network-quality-good);
}

.network-quality-severity-text[data-network-quality-severity="warning"] {
    color: var(--color-network-quality-warning);
}

.network-quality-severity-text[data-network-quality-severity="critical"] {
    color: var(--color-network-quality-critical);
}

/* ========== 状态数字软底标签（TASK-540） ==========
 * 语义登记：彩色状态数字压在用户自定义壁纸 + 毛玻璃上，背景明度不可控，
 * 软底为数字提供稳定衬底，数字颜色本身不变。彩色描边属「明确状态语义」例外。
 * 门控：个性化 networkStatus.metricPill（on 常开 / off 关闭 / auto 跟随毛玻璃，默认 auto），
 * 载体 body[data-metric-pill]，由 network-latency-updater.js 从 personalization-data 写入。
 */
body[data-metric-pill="on"] .network-quality-severity-text[data-network-quality-severity="good"],
body[data-metric-pill="on"] .network-quality-severity-text[data-network-quality-severity="warning"],
body[data-metric-pill="on"] .network-quality-severity-text[data-network-quality-severity="critical"],
html[data-glass="on"] body[data-metric-pill="auto"] .network-quality-severity-text[data-network-quality-severity="good"],
html[data-glass="on"] body[data-metric-pill="auto"] .network-quality-severity-text[data-network-quality-severity="warning"],
html[data-glass="on"] body[data-metric-pill="auto"] .network-quality-severity-text[data-network-quality-severity="critical"] {
    border-radius: 6px;
    padding: 1px 7px;
    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
}

body[data-metric-pill="on"] .network-quality-severity-text[data-network-quality-severity="good"],
html[data-glass="on"] body[data-metric-pill="auto"] .network-quality-severity-text[data-network-quality-severity="good"] {
    background-color: color-mix(in srgb, var(--color-network-quality-good) 12%, color-mix(in srgb, var(--color-card-surface) 55%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-network-quality-good) 30%, transparent);
}

body[data-metric-pill="on"] .network-quality-severity-text[data-network-quality-severity="warning"],
html[data-glass="on"] body[data-metric-pill="auto"] .network-quality-severity-text[data-network-quality-severity="warning"] {
    background-color: color-mix(in srgb, var(--color-network-quality-warning) 14%, color-mix(in srgb, var(--color-card-surface) 55%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-network-quality-warning) 32%, transparent);
}

body[data-metric-pill="on"] .network-quality-severity-text[data-network-quality-severity="critical"],
html[data-glass="on"] body[data-metric-pill="auto"] .network-quality-severity-text[data-network-quality-severity="critical"] {
    background-color: color-mix(in srgb, var(--color-network-quality-critical) 12%, color-mix(in srgb, var(--color-card-surface) 55%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-network-quality-critical) 30%, transparent);
}

/* 竖条样式 - 接近正方形的柱形 */
.latency-mini-chart > div,
.packet-loss-mini-chart > div,
.network-quality-mini-chart > div {
    flex: 1 1 0; /* 等分布局，充满容器 */
    min-width: 1px; /* 最小宽度防止消失 */
    height: 6px; /* 降低高度 */
    border-radius: 1px; /* 轻微圆角 */
    opacity: 0.6; /* 保持60%透明度 */
    /* 仅过渡不触发布局的属性，避免 resize 期间大规模重排 */
    transition: opacity 120ms linear, transform 120ms ease-out;
}

/* Resize门控：窗口调整时禁用柱条过渡，避免雪崩重绘 */
html.resizing .latency-mini-chart > div,
html.resizing .packet-loss-mini-chart > div,
html.resizing .network-quality-mini-chart > div {
    transition: none !important;
}

/* 竖条悬停效果 */
.latency-mini-chart > div:hover,
.packet-loss-mini-chart > div:hover,
.network-quality-mini-chart > div:hover {
    transform: scaleY(1.2);
    opacity: 1 !important; /* 悬停时显示完全不透明 */
    cursor: pointer;
}

/* ========== 流量进度条动画 ========== */
@keyframes traffic-pulse {
    0%, 100% {
        opacity: 1;
        transform: scaleX(1);
    }
    50% {
        opacity: 0.8;
        transform: scaleX(0.98);
    }
}

.traffic-bar[data-traffic-level="normal"] {
    background-color: var(--color-info);
}

.traffic-bar[data-traffic-level="warning"] {
    background-color: var(--color-warning);
}

.traffic-bar[data-traffic-level="error"] {
    background-color: var(--color-error);
    animation: traffic-pulse 2s infinite;
}

.traffic-bar[data-traffic-level="unlimited"] {
    background-image: linear-gradient(90deg, var(--color-accent), var(--color-info), var(--color-accent));
    background-size: auto;
}

/* ========== 标签样式 ========== */
/* 标签自适应样式 */
[id$="_CUSTOM_TAGS"] {
    /* 根据标签数量调整间距 */
}

/* Card 自定义标签：固定单行 + 溢出处理（不允许卡片内滚动） */
.server-card .dstatus-custom-tags-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
    min-height: 1.75rem;
    justify-content: flex-start;
    gap: 0.375rem;
    margin-top: 0 !important;
    padding-top: 0.5rem;
    border-top: 1px dashed color-mix(in srgb, var(--border-color) 90%, transparent);
}

.server-card .dstatus-custom-tags-row[data-empty-placeholder="true"] {
    border-top-color: transparent;
}

/* 标签胶囊不截断；放不下时由 reflow 整枚收进 +N */
.server-card .dstatus-custom-tags-row .dstatus-tag-chip {
    flex: 0 0 auto;
    border-radius: 9999px;
    padding: 0.25rem 0.5rem;
    font-size: 11px;
    line-height: 1.15;
}

.server-card .dstatus-custom-tags-row .dstatus-tag-label {
    white-space: nowrap;
}

/* +N：始终可见，不参与压缩 */
.server-card .dstatus-custom-tags-row .dstatus-tag-more {
    flex: 0 0 auto;
    background-color: var(--hover-bg-color);
    border: 1px solid var(--border-color);
    color: var(--secondary-text-color);
    border-radius: 9999px;
    padding: 0.25rem 0.5rem;
    font-size: 11px;
    line-height: 1.15;
}

/* 系统购买标签：行末靠右，不参与左侧压缩 */
.server-card .dstatus-custom-tags-row .dstatus-tag-chip[data-purchase-tag="1"] {
    margin-left: auto;
    flex: 0 0 auto;
    min-width: auto;
}

/* +N 浮层（portal，不影响卡片布局；可滚动/可复制） */
.dstatus-tag-tooltip {
    position: fixed;
    z-index: 10000;
    max-width: min(360px, calc(100vw - 16px));
    max-height: min(260px, calc(100vh - 24px));
    overflow: auto;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
    pointer-events: auto;
    user-select: text;
}

.dstatus-tag-tooltip[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dstatus-tag-tooltip-header {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    user-select: text;
    text-align: center;
}

.dstatus-tag-tooltip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
}

.dstatus-tag-tooltip .tag-item {
    user-select: text;
}

/* 标签hover时的阴影效果 */
.tag-item:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-0.5px);
}

/* JS 刷新后的标签样式（qte-tag-pill） */
.qte-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 0.25rem;
    flex-shrink: 0;
    white-space: nowrap;
    transition: all 0.15s ease;
    background-color: color-mix(in srgb, var(--tag-color, var(--secondary-text-color)) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--tag-color, var(--secondary-text-color)) 30%, transparent);
    color: var(--tag-color, var(--secondary-text-color));
}

.qte-tag-pill:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-0.5px);
}

.qte-tag-pill.qte-tag-add {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--border-color) 90%, transparent);
    background-color: transparent;
    color: var(--secondary-text-color);
    opacity: 0.6;
}

.qte-tag-pill.qte-tag-add:hover {
    opacity: 1;
    border-style: solid;
    background-color: color-mix(in srgb, var(--secondary-text-color) 10%, transparent);
}

.dark .qte-tag-pill.qte-tag-add {
    border-color: color-mix(in srgb, var(--border-color) 70%, transparent);
    color: var(--secondary-text-color);
}

/* 添加按钮样式统一 - 使用主题变量系统，提高毛玻璃环境下的对比度 */
.tag-add {
    flex-shrink: 0; /* 防止被压缩 */
    /* 禁用毛玻璃继承，避免受父容器影响 */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* 使用主题变量，支持四种状态组合 */
    background-color: var(--small-element-bg-light-no-glass);
    border-color: color-mix(in srgb, var(--border-color) 70%, transparent);
    color: var(--secondary-text-color);
    transition: all 0.15s ease;
}

/* 日间 + 毛玻璃开启 */
html:not(.dark)[data-glass="on"] body .tag-add {
    background-color: var(--small-element-bg-light-glass);
    border-color: color-mix(in srgb, var(--border-color) 85%, transparent);
    color: var(--text-color);
}

/* 日间 + 毛玻璃关闭 */
html:not(.dark)[data-glass="off"] body .tag-add {
    background-color: var(--small-element-bg-light-no-glass);
    border-color: color-mix(in srgb, var(--border-color) 85%, transparent);
    color: var(--secondary-text-color);
}

/* 夜间 + 毛玻璃开启 */
:root.dark[data-glass="on"] body .tag-add {
    background-color: var(--small-element-bg-dark-glass);
    border-color: color-mix(in srgb, var(--border-color) 70%, transparent);
    color: var(--secondary-text-color);
}

/* 夜间 + 毛玻璃关闭 */
:root.dark[data-glass="off"] body .tag-add {
    background-color: var(--small-element-bg-dark-no-glass);
    border-color: color-mix(in srgb, var(--border-color) 80%, transparent);
    color: var(--secondary-text-color);
}

/* Hover 状态 - 使用主题变量 */
.tag-add:hover {
    border-style: solid;
    background-color: var(--small-element-hover-bg-light-no-glass);
}

/* 日间 + 毛玻璃开启 - hover */
html:not(.dark)[data-glass="on"] body .tag-add:hover {
    background-color: var(--small-element-hover-bg-light-glass);
    border-color: color-mix(in srgb, var(--border-color) 95%, transparent);
    color: var(--text-color);
}

/* 日间 + 毛玻璃关闭 - hover */
html:not(.dark)[data-glass="off"] body .tag-add:hover {
    background-color: var(--small-element-hover-bg-light-no-glass);
    border-color: color-mix(in srgb, var(--border-color) 95%, transparent);
    color: var(--text-color);
}

/* 夜间 + 毛玻璃开启 - hover */
:root.dark[data-glass="on"] body .tag-add:hover {
    background-color: var(--small-element-hover-bg-dark-glass);
    border-color: color-mix(in srgb, var(--border-color) 90%, transparent);
    color: var(--text-color);
}

/* 夜间 + 毛玻璃关闭 - hover */
:root.dark[data-glass="off"] body .tag-add:hover {
    background-color: var(--small-element-hover-bg-dark-no-glass);
    border-color: color-mix(in srgb, var(--border-color) 95%, transparent);
    color: var(--text-color);
}

/* 关闭动画 */
#quick-tag-editor {
    transition: opacity 200ms, transform 200ms;
}

#quick-tag-editor.closing {
    opacity: 0;
    transform: scale(0.95);
}

/* 滚动条样式已由 `static/css/scrollbar.css` 统一管理 */