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

/* ========== 网络质量迷你图表样式 - 竖条版 ========== */
.latency-mini-chart,
.packet-loss-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(--success-color, #10b981);
    --mini-latency-warn: var(--warning-color, #f59e0b);
    --mini-latency-bad: var(--error-color, #ef4444);
    --mini-latency-empty: rgba(148, 163, 184, 0.4);
}

/* 丢包图颜色 Token */
.packet-loss-mini-chart {
    --mini-packet_loss-good: var(--success-color, #10b981);
    --mini-packet_loss-warn: var(--warning-color, #f59e0b);
    --mini-packet_loss-bad: var(--error-color, #ef4444);
    --mini-packet_loss-empty: rgba(148, 163, 184, 0.4);
}

/* 竖条样式 - 接近正方形的柱形 */
.latency-mini-chart > div,
.packet-loss-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 {
    transition: none !important;
}

/* 竖条悬停效果 */
.latency-mini-chart > div:hover,
.packet-loss-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);
    }
}

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

/* 标签hover时的阴影效果 */
.tag-item:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: translateY(-0.5px);
}

/* 添加按钮样式统一 */
.tag-add {
    flex-shrink: 0; /* 防止被压缩 */
}

.tag-add:hover {
    border-style: solid;
    background-color: rgba(148, 163, 184, 0.1);
}

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

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

/* ========== 滚动条样式统一 ========== */
.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgb(203 213 225); /* slate-300 */
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgb(148 163 184); /* slate-400 */
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgb(71 85 105); /* slate-600 */
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgb(100 116 139); /* slate-500 */
}

/* Firefox 滚动条样式 */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgb(203 213 225) transparent;
}

.dark .scrollbar-thin {
    scrollbar-color: rgb(71 85 105) transparent;
}