/**
 * 卡片视图图表和标签样式
 * 包含网络质量迷你图表、流量进度条、标签编辑器等样式
 * 原因：外置内联样式，优化首屏加载性能
 * 相关文件：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);
}

/* 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, #6b7280) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--tag-color, #6b7280) 30%, transparent);
    color: var(--tag-color, #6b7280);
}

.qte-tag-pill:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: translateY(-0.5px);
}

.qte-tag-pill.qte-tag-add {
    border-style: dashed;
    border-color: rgb(203 213 225);
    background-color: transparent;
    color: rgb(148 163 184);
    opacity: 0.6;
}

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

.dark .qte-tag-pill.qte-tag-add {
    border-color: rgb(51 65 85);
    color: rgb(71 85 105);
}

/* 添加按钮样式统一 - 使用主题变量系统，提高毛玻璃环境下的对比度 */
.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: rgba(203, 213, 225, 0.6); /* slate-300, 60% 提高对比度 */
    color: rgb(100, 116, 139); /* slate-500, 提高文字对比度 */
    transition: all 0.15s ease;
}

/* 日间 + 毛玻璃开启 */
html:not(.dark) body:not(.no-glassmorphism) .tag-add {
    background-color: var(--small-element-bg-light-glass); /* rgba(255, 255, 255, 0.6) */
    border-color: rgba(203, 213, 225, 0.8); /* 提高边框对比度 */
    color: rgb(71, 85, 105); /* slate-600, 更深以提高对比度 */
}

/* 日间 + 毛玻璃关闭 */
html:not(.dark) body.no-glassmorphism .tag-add {
    background-color: var(--small-element-bg-light-no-glass); /* rgb(241, 241, 241) */
    border-color: rgba(203, 213, 225, 0.8);
    color: rgb(100, 116, 139); /* slate-500 */
}

/* 夜间 + 毛玻璃开启 */
:root.dark body:not(.no-glassmorphism) .tag-add {
    background-color: var(--small-element-bg-dark-glass); /* rgba(30, 41, 59, 0.5) */
    border-color: rgba(71, 85, 105, 0.6); /* slate-600, 60% */
    color: rgb(203, 213, 225); /* slate-300, 更亮以提高对比度 */
}

/* 夜间 + 毛玻璃关闭 */
:root.dark body.no-glassmorphism .tag-add {
    background-color: var(--small-element-bg-dark-no-glass); /* rgba(51, 65, 85, 0.5) */
    border-color: rgba(71, 85, 105, 0.7);
    color: rgb(203, 213, 225); /* slate-300 */
}

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

/* 日间 + 毛玻璃开启 - hover */
html:not(.dark) body:not(.no-glassmorphism) .tag-add:hover {
    background-color: var(--small-element-hover-bg-light-glass); /* rgba(255, 255, 255, 0.4) */
    border-color: rgba(148, 163, 184, 0.8); /* slate-400, 更明显 */
    color: rgb(51, 65, 85); /* slate-700, 更深 */
}

/* 日间 + 毛玻璃关闭 - hover */
html:not(.dark) body.no-glassmorphism .tag-add:hover {
    background-color: var(--small-element-hover-bg-light-no-glass); /* rgba(249, 250, 251, 1) */
    border-color: rgba(148, 163, 184, 0.8);
    color: rgb(51, 65, 85);
}

/* 夜间 + 毛玻璃开启 - hover */
:root.dark body:not(.no-glassmorphism) .tag-add:hover {
    background-color: var(--small-element-hover-bg-dark-glass); /* rgba(51, 65, 85, 0.4) */
    border-color: rgba(100, 116, 139, 0.7); /* slate-500, 更亮 */
    color: rgb(226, 232, 240); /* slate-200, 更亮 */
}

/* 夜间 + 毛玻璃关闭 - hover */
:root.dark body.no-glassmorphism .tag-add:hover {
    background-color: var(--small-element-hover-bg-dark-no-glass); /* rgba(71, 85, 105, 0.9) */
    border-color: rgba(100, 116, 139, 0.8);
    color: rgb(226, 232, 240);
}

/* 关闭动画 */
#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;
}