/* Transformer Marker Styles */
.transformer-marker {
    background: transparent;
}

.htl-marker {
    width: 10px;
    height: 10px;
    background: red;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}


.tr-marker {
    background-color: #ff6b6b;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    white-space: nowrap;
    font-family: monospace;
    text-align: center;
}


/* Power Line Styles */
.power-line {
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Flow Marker Animation */
.flow-marker {
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    animation: pulse-marker 0.5s ease-in-out infinite alternate;
}

@keyframes pulse-marker {
    0% {
        r: 4;
        opacity: 0.8;
    }

    100% {
        r: 6;
        opacity: 1;
    }
}

/* Tooltip Styles */
.transformer-tooltip {
    background: rgba(0,0,0,0.85);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    color: white;
    font-size: 12px;
    padding: 8px 12px;
    font-family: 'Segoe UI', sans-serif;
    pointer-events: none;
    max-width: 250px;
}

    .transformer-tooltip::before {
        border-top-color: rgba(0,0,0,0.85);
    }

/* Map Legend */
.map-legend {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: white;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    font-size: 12px;
    font-family: 'Segoe UI', sans-serif;
    min-width: 200px;
}
    /* Different colors for different transformer ratings */
    .tr-marker[data-rating="high"] {
        background-color: #dc3545;
    }

    .tr-marker[data-rating="medium"] {
        background-color: #ffc107;
        color: #333;
    }

    .tr-marker[data-rating="low"] {
        background-color: #28a745;
    }

/* Popup Styles */
.transformer-popup {
    min-width: 200px;
    font-family: Arial, sans-serif;
}

    .transformer-popup strong {
        display: block;
        margin-bottom: 8px;
        color: #333;
        font-size: 14px;
    }

    .transformer-popup .load-bar {
        width: 100%;
        height: 6px;
        background-color: #e0e0e0;
        border-radius: 3px;
        margin-top: 8px;
        overflow: hidden;
    }

    .transformer-popup .load-fill {
        height: 100%;
        background-color: #4caf50;
        transition: width 0.3s ease;
        border-radius: 3px;
    }

        .transformer-popup .load-fill.high-load {
            background-color: #ff9800;
        }

        .transformer-popup .load-fill.critical-load {
            background-color: #f44336;
        }

/* Power Line Styles */
.power-line {
    stroke-dasharray: 5, 5;
    animation: flow 20s linear infinite;
}

@keyframes flow {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: 100;
    }
}

/* Map Controls */
.legend {
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    font-size: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.legend-color {
    width: 20px;
    height: 3px;
    margin-right: 8px;
}

    .legend-color.transformer {
        width: 12px;
        height: 12px;
        background-color: #ff6b6b;
        border-radius: 2px;
    }