/* 谐波分析模块样式修复 */

/* 谐波分析面板 */
.harmonic-analysis-panel {
    margin-bottom: 10px !important;
    background: rgba(16, 25, 40, 0.9) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 168, 255, 0.3) !important;
    padding: 8px !important;
    height: auto !important;
}

.harmonic-analysis-panel h3 {
    color: #00a8ff !important;
    margin-bottom: 6px !important;
    font-size: 14px !important;
    border-bottom: 1px solid rgba(0, 168, 255, 0.3) !important;
    padding-bottom: 4px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.harmonic-info-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 5px !important;
    margin-bottom: 5px !important;
}

.harmonic-info-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 3px 6px !important;
    background: rgba(0, 168, 255, 0.05) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(0, 168, 255, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* 跨列谐波类型项目 */
.harmonic-info-item[style*="grid-column"] {
    display: flex !important;
    justify-content: space-between !important;
    padding: 3px 6px !important;
    margin-top: 3px !important;
    background: rgba(0, 168, 255, 0.1) !important; /* 略深的背景色以区分 */
    border-radius: 6px !important;
    border: 1px solid rgba(0, 168, 255, 0.2) !important; /* 更明显的边框 */
}

.harmonic-label {
    color: var(--text-secondary) !important;
    font-size: 10px !important;
}

.harmonic-value {
    color: #00a8ff !important;
    font-size: 12px !important;
    font-weight: bold !important;
    text-shadow: 0 0 5px rgba(0, 168, 255, 0.3) !important;
}

/* 谐波类型值的特殊样式 */
#harmonic-types {
    font-size: 11px !important; /* 略小的字号适应多个谐波类型 */
    letter-spacing: 0.5px !important; /* 字母间距增加可读性 */
}

.mini-chart-container {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    background: rgba(0, 168, 255, 0.05) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(0, 168, 255, 0.1) !important;
    padding: 3px !important;
    position: relative !important;
    width: 100% !important;
}

/* 确保图表正确显示 */
#harmonic-mini-chart {
    width: 100% !important;
    height: 100% !important;
}

/* 监测结果图标样式 */
.location-label i {
    margin-right: 6px !important;
    color: #00a8ff !important;
    width: 18px !important;
    text-align: center !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* 监测状态强化样式 */
.location-info-item {
    position: relative !important;
}

.location-info-item .location-value {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* 修正监测状态的容器样式 */
.location-info-item:first-child {
    position: relative !important;
    overflow: visible !important;
    min-height: 28px !important;
}

/* 一般状态样式 */
#location-status {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: 4px !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    display: inline-block !important;
    margin: 0 !important;
    z-index: 2 !important;
}

/* 监测中状态样式 */
#location-status.status-locating {
    background: rgba(0, 168, 255, 0.15) !important;
    color: #00a8ff !important;
    border: 1px solid rgba(0, 168, 255, 0.3) !important;
    box-shadow: 0 0 10px rgba(0, 168, 255, 0.3) !important;
    text-shadow: 0 0 5px rgba(0, 168, 255, 0.5) !important;
    overflow: hidden !important;
    position: absolute !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    padding: 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
}

#location-status.status-locating::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, 
        transparent,
        #00a8ff,
        transparent) !important;
    background-size: 200% 100% !important;
    z-index: -1 !important;
    opacity: 0.3 !important;
    filter: blur(3px) !important;
    animation: statusFlowBorder 1.5s infinite linear !important;
}

@keyframes statusFlowBorder {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

#location-status.status-locating::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg,
        transparent,
        rgba(0, 168, 255, 0.5),
        transparent) !important;
    animation: statusTextGlow 2s ease-in-out infinite !important;
    z-index: 0 !important;
}

@keyframes statusTextGlow {
    0%, 100% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
}

#location-status.status-waiting {
    background: rgba(243, 156, 18, 0.15) !important;
    color: #f39c12 !important;
    border: 1px solid rgba(243, 156, 18, 0.3) !important;
    padding: 4px 10px !important;
}

#location-status.status-complete {
    background: rgba(46, 204, 113, 0.15) !important;
    color: #2ecc71 !important;
    border: 1px solid rgba(46, 204, 113, 0.3) !important;
    padding: 4px 10px !important;
}