/* K8s Simulator - AWS-Compatible Networking Styles */

/* Networking specific AWS styles que se integran con aws-theme.css */

/* Networking section modifications */
.networking-section {
    background: linear-gradient(135deg, #E8F5E8 0%, #F1F8E9 100%);
    border-left: 4px solid var(--aws-success);
    color: var(--aws-text-primary);
}

/* Network metrics específicos */
.network-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--aws-spacing-m);
    margin: var(--aws-spacing-l) 0;
}

.network-metric-card {
    background-color: var(--aws-white);
    border: 1px solid var(--aws-border);
    border-radius: var(--aws-border-radius-m);
    padding: var(--aws-spacing-l);
    text-align: center;
    transition: all 0.2s ease;
    border-left: 4px solid var(--aws-success);
}

.network-metric-card:hover {
    border-color: var(--aws-orange);
    box-shadow: var(--aws-shadow-s);
}

.network-metric-value {
    font-size: var(--aws-font-size-xl);
    font-weight: 600;
    color: var(--aws-success);
    margin-bottom: var(--aws-spacing-xs);
    line-height: 1.2;
}

.network-metric-label {
    font-size: var(--aws-font-size-xs);
    color: var(--aws-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Load Balancer específicos con estilo AWS */
.load-balancer-item {
    border-left: 4px solid var(--aws-success);
    background: var(--aws-white);
    position: relative;
}

.load-balancer-item::before {
    content: "⚖️";
    position: absolute;
    top: var(--aws-spacing-m);
    right: var(--aws-spacing-m);
    font-size: 1.2rem;
    opacity: 0.7;
}

.load-balancer-item:hover {
    border-left-color: var(--aws-orange);
    transform: translateY(-2px);
}

/* Network Service específicos */
.network-service-item {
    border-left: 4px solid var(--aws-info);
    background: var(--aws-white);
    position: relative;
}

.network-service-item::before {
    content: "🌐";
    position: absolute;
    top: var(--aws-spacing-m);
    right: var(--aws-spacing-m);
    font-size: 1.2rem;
    opacity: 0.7;
}

.network-service-item:hover {
    border-left-color: var(--aws-orange);
    transform: translateY(-2px);
}

/* Network Policy específicos */
.network-policy-item {
    border-left: 4px solid var(--aws-warning);
    background: var(--aws-white);
    position: relative;
}

.network-policy-item::before {
    content: "🔒";
    position: absolute;
    top: var(--aws-spacing-m);
    right: var(--aws-spacing-m);
    font-size: 1.2rem;
    opacity: 0.7;
}

.network-policy-item.policy-allow {
    border-left-color: var(--aws-success);
}

.network-policy-item.policy-allow::before {
    content: "✅";
}

.network-policy-item.policy-deny {
    border-left-color: var(--aws-error);
}

.network-policy-item.policy-deny::before {
    content: "❌";
}

.network-policy-item:hover {
    border-left-color: var(--aws-orange);
    transform: translateY(-2px);
}

/* Ingress específicos */
.ingress-item {
    border-left: 4px solid #6f42c1;
    background: var(--aws-white);
    position: relative;
}

.ingress-item::before {
    content: "🌍";
    position: absolute;
    top: var(--aws-spacing-m);
    right: var(--aws-spacing-m);
    font-size: 1.2rem;
    opacity: 0.7;
}

.ingress-item:hover {
    border-left-color: var(--aws-orange);
    transform: translateY(-2px);
}

/* Status indicators específicos para networking con tema AWS */
.network-status {
    display: inline-flex;
    align-items: center;
    gap: var(--aws-spacing-xs);
    padding: var(--aws-spacing-xs) var(--aws-spacing-s);
    border-radius: var(--aws-border-radius-s);
    font-size: var(--aws-font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.network-status.active {
    background-color: #DDF4E8;
    color: var(--aws-success);
    border: 1px solid #B8E6C8;
}

.network-status.inactive {
    background-color: #FDEBEE;
    color: var(--aws-error);
    border: 1px solid #F8D0D7;
}

.network-status.pending {
    background-color: #FDF5E1;
    color: var(--aws-warning);
    border: 1px solid #F7E9C7;
}

/* IP Address styling con tema AWS */
.ip-address {
    font-family: "Courier New", monospace;
    background-color: var(--aws-grey-light);
    padding: var(--aws-spacing-xs) var(--aws-spacing-s);
    border: 1px solid var(--aws-border);
    border-radius: var(--aws-border-radius-s);
    font-size: var(--aws-font-size-xs);
    color: var(--aws-text-primary);
    display: inline-block;
    margin: var(--aws-spacing-xs) 0;
}

/* URL styling for ingress con tema AWS */
.ingress-url {
    font-family: "Courier New", monospace;
    background-color: #E1F5FE;
    padding: var(--aws-spacing-xs) var(--aws-spacing-s);
    border: 1px solid var(--aws-info);
    border-radius: var(--aws-border-radius-s);
    color: var(--aws-info);
    text-decoration: none;
    display: inline-block;
    margin: var(--aws-spacing-xs) 0;
    font-size: var(--aws-font-size-xs);
    transition: all 0.2s ease;
}

.ingress-url:hover {
    background-color: #B3E5FC;
    border-color: var(--aws-orange);
    color: var(--aws-orange);
    text-decoration: underline;
}

/* Connectivity test animations con tema AWS */
.connectivity-test {
    animation: aws-pulse-network 2s infinite;
}

@keyframes aws-pulse-network {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 153, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0);
    }
}

/* Endpoint status indicators con tema AWS */
.endpoint-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: var(--aws-spacing-xs);
}

.endpoint-ready {
    background: var(--aws-success);
    box-shadow: 0 0 4px rgba(46, 160, 67, 0.5);
}

.endpoint-not-ready {
    background: var(--aws-error);
    box-shadow: 0 0 4px rgba(218, 13, 48, 0.5);
}

.endpoint-unknown {
    background: var(--aws-warning);
    box-shadow: 0 0 4px rgba(209, 135, 0, 0.5);
}

/* Network topology visualization con tema AWS */
.network-topology {
    background-color: var(--aws-grey-light);
    border: 2px dashed var(--aws-border);
    border-radius: var(--aws-border-radius-m);
    padding: var(--aws-spacing-xxl);
    text-align: center;
    color: var(--aws-text-secondary);
    margin: var(--aws-spacing-l) 0;
    transition: all 0.2s ease;
}

.network-topology:hover {
    border-color: var(--aws-orange);
    background-color: rgba(255, 153, 0, 0.05);
}

/* Traffic flow indicators con tema AWS */
.traffic-flow {
    display: flex;
    align-items: center;
    margin: var(--aws-spacing-s) 0;
}

.traffic-arrow {
    font-size: 1.2rem;
    color: var(--aws-orange);
    margin: 0 var(--aws-spacing-s);
    animation: aws-flow 2s ease-in-out infinite;
}

@keyframes aws-flow {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(5px);
        opacity: 1;
    }
}

/* Load balancer algorithm indicator con tema AWS */
.lb-algorithm {
    background: linear-gradient(45deg, var(--aws-orange), var(--aws-orange-dark));
    color: var(--aws-white);
    padding: var(--aws-spacing-xs) var(--aws-spacing-s);
    border-radius: var(--aws-border-radius-s);
    font-size: var(--aws-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    margin: var(--aws-spacing-xs) 0;
}

/* Service mesh visualization con tema AWS */
.service-mesh {
    position: relative;
    background: radial-gradient(circle at center, rgba(255, 153, 0, 0.1) 0%, transparent 70%);
    border-radius: var(--aws-border-radius-l);
    padding: var(--aws-spacing-l);
    margin: var(--aws-spacing-l) 0;
    border: 1px solid var(--aws-border);
}

.mesh-node {
    display: inline-block;
    width: 60px;
    height: 60px;
    background: var(--aws-orange);
    border-radius: 50%;
    margin: var(--aws-spacing-s);
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid var(--aws-white);
    box-shadow: var(--aws-shadow-s);
}

.mesh-node:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 153, 0, 0.5);
}

.mesh-connection {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, var(--aws-orange), transparent, var(--aws-orange));
    animation: aws-data-flow 2s linear infinite;
}

@keyframes aws-data-flow {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

/* DNS resolution indicator con tema AWS */
.dns-indicator {
    display: inline-flex;
    align-items: center;
    background: #E8F5E8;
    border: 1px solid var(--aws-success);
    border-radius: var(--aws-border-radius-s);
    padding: var(--aws-spacing-xs) var(--aws-spacing-s);
    font-size: var(--aws-font-size-xs);
    color: var(--aws-success);
    margin: var(--aws-spacing-xs) 0;
}

.dns-indicator::before {
    content: "🌐";
    margin-right: var(--aws-spacing-xs);
}

/* Port forwarding styles con tema AWS */
.port-forward {
    background-color: #FDF5E1;
    border: 1px solid var(--aws-warning);
    border-radius: var(--aws-border-radius-s);
    padding: var(--aws-spacing-s);
    margin: var(--aws-spacing-xs) 0;
    font-family: "Courier New", monospace;
    font-size: var(--aws-font-size-xs);
    color: var(--aws-warning);
}

/* Network security indicators con tema AWS */
.security-level {
    display: inline-block;
    padding: var(--aws-spacing-xs) var(--aws-spacing-s);
    border-radius: var(--aws-border-radius-s);
    font-size: var(--aws-font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    margin: var(--aws-spacing-xs) 0;
}

.security-high {
    background: #DDF4E8;
    color: var(--aws-success);
    border: 1px solid var(--aws-success);
}

.security-medium {
    background: #FDF5E1;
    color: var(--aws-warning);
    border: 1px solid var(--aws-warning);
}

.security-low {
    background: #FDEBEE;
    color: var(--aws-error);
    border: 1px solid var(--aws-error);
}

/* Estados de error para networking con tema AWS */
.network-error {
    background: #FDEBEE;
    border: 1px solid var(--aws-error);
    color: var(--aws-error);
    padding: var(--aws-spacing-s);
    border-radius: var(--aws-border-radius-s);
    margin: var(--aws-spacing-s) 0;
    border-left: 4px solid var(--aws-error);
}

.network-warning {
    background: #FDF5E1;
    border: 1px solid var(--aws-warning);
    color: var(--aws-warning);
    padding: var(--aws-spacing-s);
    border-radius: var(--aws-border-radius-s);
    margin: var(--aws-spacing-s) 0;
    border-left: 4px solid var(--aws-warning);
}

.network-success {
    background: #DDF4E8;
    border: 1px solid var(--aws-success);
    color: var(--aws-success);
    padding: var(--aws-spacing-s);
    border-radius: var(--aws-border-radius-s);
    margin: var(--aws-spacing-s) 0;
    border-left: 4px solid var(--aws-success);
}

/* Networking tabs específicos con estilo AWS mejorado */
.networking-tabs {
    display: flex;
    background: var(--aws-grey-light);
    border: 1px solid var(--aws-border);
    border-radius: var(--aws-border-radius-m);
    margin-bottom: var(--aws-spacing-l);
    overflow: hidden;
    box-shadow: var(--aws-shadow-s);
}

.networking-tab {
    flex: 1;
    padding: var(--aws-spacing-m);
    background: var(--aws-grey-light);
    border: none;
    border-right: 1px solid var(--aws-border);
    cursor: pointer;
    font-weight: 500;
    font-size: var(--aws-font-size-s);
    color: var(--aws-text-secondary);
    transition: all 0.2s ease;
    position: relative;
}

.networking-tab:last-child {
    border-right: none;
}

.networking-tab:hover:not(.active) {
    background-color: var(--aws-grey);
    color: var(--aws-text-primary);
}

.networking-tab.active {
    background-color: var(--aws-white);
    color: var(--aws-orange);
    box-shadow: inset 0 -3px 0 0 var(--aws-orange);
}

.networking-content {
    display: none;
}

.networking-content.active {
    display: block;
}

/* Responsive design for networking con tema AWS */
@media (max-width: 768px) {
    .networking-tabs {
        flex-direction: column;
    }
    
    .networking-tab {
        border-right: none;
        border-bottom: 1px solid var(--aws-border);
    }
    
    .networking-tab:last-child {
        border-bottom: none;
    }
    
    .network-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mesh-node {
        width: 40px;
        height: 40px;
        margin: var(--aws-spacing-xs);
    }
    
    .traffic-flow {
        flex-direction: column;
        gap: var(--aws-spacing-xs);
    }
}

/* Mejoras específicas para la integración con D3.js y topología */
.topology-svg {
    background-color: var(--aws-white);
    border: 1px solid var(--aws-border);
    border-radius: var(--aws-border-radius-m);
}

.topology-node {
    cursor: pointer;
    transition: all 0.2s ease;
}

.topology-node:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
}

.topology-link {
    stroke: var(--aws-border-dark);
    stroke-width: 2;
    transition: all 0.2s ease;
}

.topology-link.active {
    stroke: var(--aws-orange);
    stroke-width: 3;
    animation: aws-pulse-link 2s infinite;
}

@keyframes aws-pulse-link {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

/* Etiquetas y textos de topología */
.topology-label {
    font-family: var(--aws-font-family);
    font-size: var(--aws-font-size-xs);
    fill: var(--aws-text-primary);
    text-anchor: middle;
    dominant-baseline: central;
}

.topology-metric {
    font-family: var(--aws-font-family);
    font-size: 10px;
    fill: var(--aws-text-secondary);
}

/* Indicadores de performance de red */
.network-performance {
    display: flex;
    gap: var(--aws-spacing-s);
    align-items: center;
    margin: var(--aws-spacing-s) 0;
}

.latency-indicator {
    padding: var(--aws-spacing-xs) var(--aws-spacing-s);
    border-radius: var(--aws-border-radius-s);
    font-size: var(--aws-font-size-xs);
    font-weight: 500;
}

.latency-low {
    background: #DDF4E8;
    color: var(--aws-success);
}

.latency-medium {
    background: #FDF5E1;
    color: var(--aws-warning);
}

.latency-high {
    background: #FDEBEE;
    color: var(--aws-error);
}