/* Additional styles specific to regional conflicts visualization */
        @import "colors.css";
        .tooltip {
            position: absolute;
            padding: 10px;
            background: #11282A;
            color: white;
            border-radius: 5px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
            font-family: 'Fira Sans', sans-serif;
            font-size: 12px;
            max-width: 200px;
            z-index: 1000;
        }

        .legend {
            font-family: 'Fira Sans', sans-serif;
            font-size: 12px;
        }
        
        .legend-item {
            cursor: pointer;
            transition: opacity 0.2s;
        }
        
        .legend-item:hover {
            opacity: 0.7;
        }
        
        .legend-rect {
            stroke: #fff;
            stroke-width: 1;
        }
        
        .bar-segment {
            cursor: pointer;
            transition: opacity 0.2s;
        }
        
        .bar-segment:hover {
            opacity: 0.8;
            stroke: #333;
            stroke-width: 1;
        }

        .chart-caption {
            font-family: 'Fira Sans', sans-serif;
            font-size: 14px;
            color: #666;
            text-align: center;
            margin-top: 1rem;
            font-style: italic;
        }

        .loading-message {
            text-align: center;
            font-family: 'Fira Sans', sans-serif;
            color: #666;
            padding: 2rem;
        }

        /* Styles specific to ethnic vs nationalist chart */
        .ethnic-nationalist-bar-group .bar-segment {
            transition: opacity 0.2s, stroke 0.2s;
        }

        .ethnic-nationalist-bar-group .bar-segment:hover {
            opacity: 0.8;
            stroke: #333;
            stroke-width: 2;
        }

        .chart-info {
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 5px;
            margin: 1rem 0;
            border-left: 4px solid var(--fire-brick);
        }

        .chart-info p {
            margin: 0.5rem 0;
            font-size: 14px;
        }

        .axis {
            font-family: 'Fira Sans', sans-serif;
            font-size: 11px;
        }

        .axis-label {
            font-family: 'Fira Sans', sans-serif;
            font-weight: 500;
            fill: #555;
        }