/**
 * D3 Charts Styles
 * BH-COLOR compatible modern styling
 */

/* ===== Network Graph ===== */

.bhi-network-graph {
    position: relative;
    overflow: hidden;
}

.bhi-network-placeholder {
    padding: 40px;
    text-align: center;
    color: #666;
}

.bhi-network-svg {
    display: block;
}

.bhi-network-graph .node circle {
    transition: r 0.2s ease, filter 0.2s ease;
}

.bhi-network-graph .node:hover circle {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.bhi-network-graph .node text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    pointer-events: none;
}

.bhi-network-graph .links line {
    transition: stroke-opacity 0.2s ease;
}

.bhi-network-graph .link-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    pointer-events: none;
    opacity: 0.7;
}

/* Metro Style */
.bhi-metro-style .metro-line {
    transition: stroke-width 0.2s ease;
}

.bhi-metro-style .metro-station {
    transition: transform 0.2s ease;
}

.bhi-metro-style .metro-station:hover .metro-line {
    stroke-width: 6;
}

.bhi-metro-style .metro-station text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    pointer-events: none;
}

/* Tooltip */
.bhi-network-tooltip {
    position: absolute;
    background: rgba(30, 30, 30, 0.95);
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    pointer-events: none;
    z-index: 1000;
    max-width: 280px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.bhi-network-tooltip strong {
    color: #fff;
    font-weight: 600;
}

.bhi-network-tooltip small {
    color: #A7C7D6;
    text-transform: capitalize;
}

/* Empty/Error states */
.bhi-network-empty,
.bhi-network-error {
    text-align: center;
    color: #8B7355;
    padding: 40px 20px;
    font-style: italic;
}

.bhi-network-error {
    color: #BD0104;
}

/* ===== Sankey Diagram ===== */

.bhi-sankey {
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 16px;
    margin: 16px 0;
}

.bhi-sankey svg {
    display: block;
    width: 100%;
}

.sankey-node rect {
    transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

.sankey-node text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    pointer-events: none;
}

.sankey-link path {
    transition: stroke-opacity 0.2s ease;
}

/* ===== Legend ===== */

.bhi-d3-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #DDE8EF;
}

.bhi-d3-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #1e1e1e;
}

.bhi-d3-legend-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

/* ===== Responsive ===== */

@media (max-width: 768px) {
    .bhi-network-graph,
    .bhi-sankey {
        padding: 12px;
        margin: 12px 0;
    }
    
    .bhi-network-tooltip {
        max-width: 200px;
        font-size: 12px;
        padding: 8px 10px;
    }
    
    .bhi-d3-legend {
        justify-content: center;
    }
}

/* ===== Dark Mode Support ===== */

@media (prefers-color-scheme: dark) {
    .bhi-network-graph,
    .bhi-sankey {
        /* Don't override inline styles - let block attributes control background and shadow */
        /* background: #1e1e1e; */
        /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); */
    }
    
    .bhi-network-graph .node text,
    .sankey-node text {
        fill: #e0e0e0;
    }
    
    .bhi-d3-legend-item {
        color: #e0e0e0;
    }
    
    .bhi-d3-legend {
        border-top-color: #333;
    }
}