/**
 * 双位TOP (Double Top) 卡片摘要的特定样式
 * 与其他卡片保持完全一致的样式
 */

/* 
 * 双位TOP卡片的主容器
 */
[data-dimension-id="double_top_hit"] .dimension-card-content {
    /* 移除内容区域的内边距，让摘要容器可以接触到卡片边缘 */
    padding: 0 !important;
    /* 确保内容填满整个卡片 */
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* 
 * 卡片标题区域 - 与其他卡片完全一致
 */
[data-dimension-id="double_top_hit"] .dt-card-header {
    /* 减少内边距，让标题更紧凑 */
    padding: 8px 12px 2px 12px !important;
    flex-shrink: 0 !important;
}

[data-dimension-id="double_top_hit"] .dimension-name {
    color: #dadada !important;
    font-size: 16px !important;
    font-weight: bold !important;
    margin: 0 !important;
    text-align: left !important;
    text-shadow: none !important;
    padding: 0 !important;
}

/* 
 * 摘要区域 - 减少间隙，让内容贴合容器
 */
[data-dimension-id="double_top_hit"] .dt-summary-area {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0px !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
}

/* 
 * 柱状图容器 - 大幅减少内边距和高度
 */
[data-dimension-id="double_top_hit"] .dt-histogram-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: flex-end !important;
    width: 100% !important;
    height: 100% !important;
    gap: 4px !important;
    padding: 2px 6px 6px 6px !important;
    box-sizing: border-box !important;
}

/* 柱子包装器 */
[data-dimension-id="double_top_hit"] .dt-bar-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 !important;
    height: 100% !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
}

/* 柱子上方的文字标签 - 减少间距 */
[data-dimension-id="double_top_hit"] .dt-bar-top-text {
    color: #dadada !important;
    font-size: 14px !important;
    font-weight: bold !important;
    margin-bottom: 1px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-shadow: none !important;
}

/* 柱子样式 - 减少最小高度 */
[data-dimension-id="double_top_hit"] .dt-bar {
    width: 70% !important;
    min-width: 12px !important;
    background: linear-gradient(to top, #4CAF50, #66BB6A) !important;
    border-radius: 3px 3px 0 0 !important;
    transition: height 0.3s ease-out !important;
    color: white !important;
    font-size: 15px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: 1px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    /* 高度由 JS 动态设置 */
}

/* 柱子颜色变体 */
[data-dimension-id="double_top_hit"] .dt-bar:nth-child(2) {
    background: linear-gradient(to top, #2196F3, #42A5F5) !important;
}

[data-dimension-id="double_top_hit"] .dt-bar:nth-child(3) {
    background: linear-gradient(to top, #FF9800, #FFB74D) !important;
}

/* 高亮效果 */
[data-dimension-id="double_top_hit"] .dt-bar.glow-effect {
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.7), 
                0 0 12px 4px rgba(255, 255, 255, 0.5) !important;
    animation: pulse-white-glow 1.5s infinite alternate !important;
}

/* 文字高亮为绿色背景 - 只有高亮时才应用 */
[data-dimension-id="double_top_hit"] .dt-bar-top-text.highlight-omission {
    background-color: #28a745 !important;
    color: #ffffff !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    box-shadow: 0 0 6px rgba(40, 167, 69, 0.8) !important;
}

@keyframes pulse-white-glow {
    from {
        box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.6), 
                    0 0 10px 3px rgba(255, 255, 255, 0.4);
    }
    to {
        box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.8), 
                    0 0 16px 5px rgba(255, 255, 255, 0.6);
    }
}

/* 悬停效果 */
[data-dimension-id="double_top_hit"] .dt-bar:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2) !important;
}

/* 响应式调整 - 与其他卡片保持一致 */
@media (max-width: 600px) {
    [data-dimension-id="double_top_hit"] .dimension-name {
        font-size: 13px !important;
    }
    
    [data-dimension-id="double_top_hit"] .dt-card-header {
        padding: 6px 10px 2px 10px !important;
    }
    
    [data-dimension-id="double_top_hit"] .dt-bar-top-text {
        font-size: 13px !important;
        line-height: 1.0 !important;
    }
    
    [data-dimension-id="double_top_hit"] .dt-bar {
        font-size: 12px !important;
    }
    
    [data-dimension-id="double_top_hit"] .dt-histogram-container {
        padding: 1px 4px 4px 4px !important;
        gap: 3px !important;
    }
}