/**
 * Network Quality 页面专用样式
 * @description 包含网络质量监控页面的所有样式：布局、按钮、组件、响应式等
 * @file static/css/pages/network-quality.css
 */

/* ==================== 布局样式 ==================== */

.network-quality-grid {
    display: grid;
    grid-template-columns: 1fr; /* 默认1列 */
    gap: 1rem;
}

/* PC端优化：固定最多2列 */
@media (min-width: 768px) {
    .network-quality-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

.network-status-card {
    border-radius: 12px;
    overflow: hidden;
}

/* 网络质量页面专用图表容器样式 - 避免与其他页面冲突 */
/* 简化响应式断点：移动(200px) / 平板(240px) / PC(280px) */
.network-quality-grid .chart-container {
    min-height: 200px; /* 移动端默认 */
    width: 100%;
    height: auto; /* 覆盖全局固定高度 */
    position: relative;
}

/* 平板端 (769px-1199px) */
@media (min-width: 769px) {
    .network-quality-grid .chart-container {
        min-height: 240px;
    }
}

/* PC端 (≥1200px) */
@media (min-width: 1200px) {
    .network-quality-grid .chart-container {
        min-height: 280px;
    }
}

/* 移动端优化 */
@media (max-width: 768px) {
    .network-quality-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* 平板端适配（固定两列，避免出现三列） */
@media (min-width: 769px) and (max-width: 1199px) {
    .network-quality-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* ==================== 字体层级 (页面作用域) ==================== */

/* 主标题略微收紧，确保层级清晰且整体更紧凑 */
.network-quality-page h1.text-xl { 
  font-size: 1.125rem; 
  line-height: 1.5rem; 
  letter-spacing: 0; 
  text-shadow: none; /* 移除标题阴影效果 */
}

/* 二级标题小一号，增强主次关系 */
.network-quality-page h3.text-lg { font-size: 1rem; line-height: 1.375rem; }

/* 节点卡片标题更小更紧凑 */
.network-quality-page .network-status-card h3 { font-size: 0.9375rem; line-height: 1.25rem; }

/* 加载/空状态文字缩小，避免喧宾夺主 */
.network-quality-page #loading-container .text-lg { font-size: 0.9375rem; line-height: 1.375rem; }
.network-quality-page #empty-container h3.text-xl { font-size: 1.125rem; line-height: 1.5rem; }

/* 下拉项与计数的字级精细化 */
.network-quality-page .nq-dropdown-item span.text-sm { font-size: 0.8125rem; }
.network-quality-page .nq-dropdown-item .nq-item-count { font-size: 0.6875rem; }

/* 工具栏按钮维持较小字号，进一步统一 */
.network-quality-page .nq-status-btn, .network-quality-page .nq-filter-btn { font-size: 0.75rem; }

/* 指标徽章保持小字号与清晰度 */
.network-quality-page .metric-badge { font-size: 0.8125rem; }

/* 小贴士与次要信息统一浅色与小字号（继承现有暗色模式） */
.network-quality-page .hint, .network-quality-page .subtext { font-size: 0.75rem; color: rgb(100 116 139); }
.dark .network-quality-page .hint, .dark .network-quality-page .subtext { color: rgb(148 163 184); }

/* 解决文字模糊：为标题区域文字创建独立渲染层，避免被 backdrop-filter 影响 */
.network-quality-page .card .flex.items-center.gap-3 {
  transform: translateZ(0);
  will-change: transform;
  position: relative;
  z-index: 1;
}

.network-quality-page .card .flex.items-center.gap-3 h1,
.network-quality-page .card .flex.items-center.gap-3 p {
  transform: translateZ(0);
  will-change: transform;
  position: relative;
  z-index: 1;
}

/* ==================== 状态指示器 ==================== */

.server-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
}

.server-status-online {
    background-color: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.server-status-offline {
    background-color: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.server-status-warning {
    background-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.server-status-error {
    background-color: #dc2626;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
}

/* ==================== 指标徽章 ==================== */

.metric-badge {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    color: rgb(59, 130, 246);
    font-weight: 600;
    font-size: 0.875rem;
    text-align: center; /* 居中对齐标签与数值 */
}

/* 指标徽章变体类 */
.metric-badge-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(34, 197, 94, 0.1));
    border-color: rgba(16, 185, 129, 0.2);
    color: rgb(16, 185, 129);
}

.metric-badge-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
    border-color: rgba(59, 130, 246, 0.2);
    color: rgb(59, 130, 246);
}

.metric-badge-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(147, 51, 234, 0.1));
    border-color: rgba(168, 85, 247, 0.2);
    color: rgb(168, 85, 247);
}

/* ==================== Mini Grid (Targets) ==================== */

/* 使用 CSS 变量控制列数，3:2比例卡片 */
.network-quality-page .mini-grid {
    display: grid;
    grid-template-columns: repeat(var(--nq-cols, 5), minmax(132px, 152px)); /* 再降宽度，提升小屏两列阈值 */
    justify-content: center;
    gap: 8px;
    transition: grid-template-columns 0.15s ease;
}

/* Mini 卡片覆盖工具条（默认隐藏，仅在 hover/聚焦时显示） */
.network-quality-page .mini-card { position: relative; }

.network-quality-page .mini-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px; /* 更小的底部占用，不超过卡片高度的50% */
    max-height: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px; /* 更紧凑的间距 */
    padding: 0 6px; /* 轻量内边距，避免拥挤 */
    flex-wrap: nowrap; /* 默认禁止换行，优先单行展示 */
    white-space: nowrap; /* 避免文本换行 */
    background: rgba(248, 250, 252, 0.85); /* 更明显一些 */
    border-top: 1px solid var(--light-border-color);
    z-index: 2;
    pointer-events: none; /* 背景不吸收事件，避免影响曲线开关 */
}

.network-quality-page .mini-card-overlay .btn-text { pointer-events: auto; }

.network-quality-page .mini-card-overlay .overlay-pill {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px; /* 更小的图标与文字间距 */
    padding: 3px 8px; /* 更小的药丸内边距 */
    border-radius: 9999px;
    border: 1px solid var(--light-border-color);
    background: rgba(255,255,255,0.95);
    white-space: nowrap; /* 单颗药丸不换行 */
    line-height: 1; /* 更紧凑的行高 */
}

.network-quality-page .mini-card-overlay .overlay-pill i { font-size: 11px; }

.network-quality-page .mini-card-overlay .overlay-pill .overlay-label { font-size: 9px; color: var(--light-text-color); line-height: 1; }

/* 自适应：紧凑/图标-only 模式，优先保持单行 */
.network-quality-page .mini-card-overlay.compact { gap: 4px; }

.network-quality-page .mini-card-overlay.compact .overlay-pill { padding: 2px 6px; gap: 3px; }

.network-quality-page .mini-card-overlay.compact .overlay-pill .overlay-label { display: none; }

.network-quality-page .mini-card-overlay.icononly { gap: 4px; }

.network-quality-page .mini-card-overlay.icononly .overlay-pill { padding: 2px 5px; gap: 2px; }

.network-quality-page .mini-card-overlay.icononly .overlay-pill i { font-size: 10px; }

.network-quality-page .mini-card-overlay.icononly .overlay-pill .overlay-label { display: none; }

.dark .network-quality-page .mini-card-overlay {
    background: rgba(30, 41, 59, 0.85); /* 暗色更明显 */
    border-top-color: var(--dark-border-color);
}

.dark .network-quality-page .mini-card-overlay .overlay-pill { background: rgba(15,23,42,0.95); border-color: var(--dark-border-color); }

.dark .network-quality-page .mini-card-overlay .overlay-pill .overlay-label { color: var(--dark-text-color); }

.network-quality-page .mini-card:hover .mini-card-overlay,
.network-quality-page .mini-card:focus-within .mini-card-overlay {
    display: flex;
}

/* ==================== 按钮样式 ==================== */

.time-range-btn {
    padding: 0.375rem 0.75rem;
    border: 1px solid rgb(226 232 240);
    background: white;
    color: rgb(71 85 105);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.time-range-btn:hover {
    border-color: rgb(59 130 246);
    color: rgb(59 130 246);
    background: rgba(59, 130, 246, 0.05);
}

.time-range-btn.active {
    border-color: rgb(59 130 246);
    background: rgb(59 130 246);
    color: white;
}

.time-range-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.dark .time-range-btn {
    border-color: rgb(51 65 85);
    background: rgb(30 41 59);
    color: rgb(203 213 225);
}

.dark .time-range-btn:hover {
    border-color: rgb(99 102 241);
    color: rgb(99 102 241);
    background: rgba(99, 102, 241, 0.1);
}

.dark .time-range-btn.active {
    border-color: rgb(99 102 241);
    background: rgb(99 102 241);
    color: white;
}

.refresh-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid rgb(34 197 94);
    background: white;
    color: rgb(34 197 94);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.refresh-btn:hover {
    border-color: rgb(22 163 74);
    color: rgb(22 163 74);
    background: rgba(34, 197, 94, 0.05);
}

.refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.refresh-btn.loading {
    pointer-events: none;
}

.refresh-btn.loading [data-lucide] {
}

.dark .refresh-btn {
    border-color: rgb(34 197 94);
    background: rgb(30 41 59);
    color: rgb(34 197 94);
}

.dark .refresh-btn:hover {
    border-color: rgb(74 222 128);
    color: rgb(74 222 128);
    background: rgba(34, 197, 94, 0.1);
}

.width-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid rgb(168 85 247);
    background: white;
    color: rgb(168 85 247);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.width-toggle-btn:hover {
    border-color: rgb(147 51 234);
    color: rgb(147 51 234);
    background: rgba(168, 85, 247, 0.05);
}

.width-toggle-btn.active {
    border-color: rgb(147 51 234);
    background: rgb(168 85 247);
    color: white;
}

.dark .width-toggle-btn {
    border-color: rgb(168 85 247);
    background: rgb(30 41 59);
    color: rgb(168 85 247);
}

.dark .width-toggle-btn:hover {
    border-color: rgb(192 132 252);
    color: rgb(192 132 252);
    background: rgba(168, 85, 247, 0.1);
}

.dark .width-toggle-btn.active {
    border-color: rgb(192 132 252);
    background: rgb(168 85 247);
    color: white;
}

/* 全宽模式样式 */
body.full-width-mode #container {
    max-width: none !important;
    width: 100% !important;
}

/* 按钮图标与文字对齐统一样式 */
.width-toggle-btn,
.refresh-btn,
.nq-filter-btn,
.nq-status-btn {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.width-toggle-btn i,
.refresh-btn i,
.nq-filter-btn i,
.nq-status-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;   /* 16px */
    height: 1rem;  /* 16px */
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
}

.width-toggle-btn span,
.refresh-btn span,
.nq-filter-btn span,
.nq-status-btn span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* 筛选器按钮样式 */
.nq-status-btn.active,
.nq-filter-btn.active {
    border-color: rgb(59 130 246) !important;
    background-color: rgb(239 246 255) !important;
    color: rgb(29 78 216) !important;
}

.dark .nq-status-btn.active,
.dark .nq-filter-btn.active {
    border-color: rgb(99 102 241) !important;
    background-color: rgba(99, 102, 241, 0.2) !important;
    color: rgb(165 180 252) !important;
}

/* ==================== 下拉菜单样式 ==================== */

/* 下拉菜单样式已迁移到 dropdown-menu 组件，保留菜单项特殊样式 */

.nq-dropdown-item.active {
    background-color: rgb(239 246 255);
    color: rgb(29 78 216);
}

.dark .nq-dropdown-item.active {
    background-color: rgba(99, 102, 241, 0.2);
    color: rgb(165 180 252);
}

/* 下拉菜单最大高度工具类 */
.dropdown-menu__content--max-h-12 {
    max-height: 12rem;
}

/* ==================== 布局修复 ==================== */

/* 确保下拉菜单不被容器裁剪 */
.card {
    overflow: visible !important;
}

.relative {
    z-index: auto;
}

.relative:focus-within {
    z-index: 50;
}

/* 确保下拉菜单容器有足够高的 z-index，避免被下方卡片遮挡 */
#nq-group-filter.relative:focus-within,
#nq-region-filter.relative:focus-within {
    z-index: 100;
}

/* 关键修复：当筛选器激活时，提高包含筛选器的卡片 z-index
   由于 backdrop-filter 创建了新的层叠上下文，需要确保卡片本身的层叠上下文高于下一个卡片 */
.card:has(#nq-group-filter:focus-within),
.card:has(#nq-region-filter:focus-within) {
    z-index: 100 !important;
    position: relative;
}

/* 兼容性回退：如果浏览器不支持 :has()，使用 JavaScript 添加类 */
.card.filter-active {
    z-index: 100 !important;
    position: relative;
}

/* 搜索框 z-index 处理：当搜索框激活时，提高层级避免被下方卡片遮挡 */
#nq-search-container .nq-search-wrapper:focus-within {
    z-index: 100;
}

/* 关键修复：当搜索框激活时，提高包含搜索框的卡片 z-index
   由于 backdrop-filter 创建了新的层叠上下文，需要确保卡片本身的层叠上下文高于下一个卡片 */
.card:has(#nq-search-container:focus-within) {
    z-index: 100 !important;
    position: relative;
}

/* 兼容性回退：如果浏览器不支持 :has()，使用 JavaScript 添加类 */
.card.search-active {
    z-index: 100 !important;
    position: relative;
}

/* 下拉菜单 z-index 已由 dropdown-menu 组件统一管理，无需单独设置 */

/* ==================== 搜索框样式 ==================== */

/* 搜索框状态文本优化 */
.nq-search-status-text {
    font-size: 0.75rem;
    line-height: 1rem;
    white-space: nowrap;
}

/* ==================== 动画样式 ==================== */

/* 展开筛选器动画 */
#nq-expanded-filters {
    transition: all 0.3s ease;
}

#nq-expanded-filters.hidden {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

#nq-expanded-filters:not(.hidden) {
    opacity: 1;
    max-height: 500px;
}

/* 更多筛选按钮状态 */
#nq-more-filters-btn i {
    transition: transform 0.2s ease;
}

#nq-more-filters-btn.expanded i {
    transform: rotate(180deg);
}

/* ==================== 响应式优化 ==================== */

@media (max-width: 1024px) {
    /* 保持移动端显示文字 */
    .nq-filter-btn span:not([data-lucide]) {
        display: inline;
    }

    .nq-filter-btn {
        padding: 0.5rem;
    }
}

@media (max-width: 640px) {
    .nq-search-status-text {
        display: none !important;
    }

    .nq-status-btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .nq-dropdown-menu {
        position: fixed;
        left: 1rem;
        right: 1rem;
        top: auto;
        transform: none;
        max-width: none;
    }
}