/* =====================================================
   CYBERPUNK COMMAND CENTER
   NETWORK OPERATIONS
===================================================== */

#network{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:var(--space-xl);

    padding:calc(var(--space-xl) * 1.6) var(--space-lg);

}


/*
    Section header
*/

.section-header{

    text-align:center;

}

.section-kicker{

    display:block;

    color:var(--cyan);

    font-family:var(--font-body);

    font-size:.75rem;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:var(--space-xs);

    text-shadow:var(--glow-cyan);

}

.section-header h2{

    font-family:var(--font-title);

    font-size:var(--fs-h1);

    color:var(--text-color);

}

/*
    Network section's own headers — the main "Network
    Operations" title and the Radar Sweep/Threat Scanner
    sub-headers below it — read as small labels instead of
    competing with the map/scope widgets for visual weight.
    Matches the kicker label directly above each one in size.
    Scoped to #network's direct child so Contact's "Contact"
    heading (same .section-header markup) is unaffected.
    Mirrors the same fix already made in CyberCore.Blazor's
    network.css.
*/

#network > .section-header h2,
.radar-section .section-header h2{

    font-size:.75rem;

    font-weight:normal;

}


/*
    Layout: map + intelligence panel
*/

.network-layout{

    width:100%;

    max-width:1500px;

    display:flex;

    align-items:stretch;

    justify-content:center;

    gap:var(--space-lg);

    flex-wrap:wrap;

}


/*
    Map container
*/

.network-map{

    flex:3 1 640px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

.world-map{

    width:100%;

    height:auto;

    max-height:78vh;

}


/*
    Country regions
*/

.country{

    fill:var(--bg-secondary);

    stroke:var(--bg-color);

    stroke-width:0.5;

    cursor:pointer;

    transition:fill var(--transition-fast);

}

.country:hover{

    fill:var(--cyan);

}

.country.selected{

    fill:var(--danger);

}


/*
    Connection arcs
*/

.network-connection{

    fill:none;

    stroke:rgba(0, 229, 255, 0.28);

    stroke-width:1;

    vector-effect:non-scaling-stroke;

    pointer-events:none;

}


/*
    Node markers
*/

.network-marker{

    stroke:var(--bg-color);

    stroke-width:1.5;

    cursor:pointer;

    transition:
        r var(--transition-fast),
        filter var(--transition-fast);

}

.network-marker:hover{

    r:9;

    filter:drop-shadow(0 0 6px currentColor);

}


/*
    Region label
*/

.network-label{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:2.6rem;

    margin-bottom:var(--space-md);

    color:var(--text-color);

    font-family:var(--font-title);

    font-size:1.3rem;

    font-weight:700;

    letter-spacing:.5px;

    background:var(--panel-bg);

    backdrop-filter:var(--glass-blur);

    padding:.5rem 1.5rem;

    border-radius:var(--radius-sm);

    border:var(--panel-border);

    pointer-events:none;

    opacity:0;

    transition:opacity var(--transition-fast);

}

.network-label.show{

    opacity:1;

}


/*
    Regional intelligence panel
*/

.network-panel{

    flex:1 1 280px;

    min-width:260px;

    padding:var(--space-md);

    border:var(--panel-border);

    border-radius:var(--radius-md);

    background:var(--panel-bg);

    backdrop-filter:var(--glass-blur);

}

.network-panel .hint{

    color:var(--text-muted);

    font-size:var(--fs-small);

}

.network-panel .summary{

    color:var(--cyan);

    font-family:var(--font-body);

    font-size:.7rem;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-top:var(--space-xs);

}

.network-panel .field{

    margin-bottom:var(--space-sm);

}

.network-panel .field span{

    display:block;

}

.network-panel .field-label{

    color:var(--text-muted);

    font-size:.7rem;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:.2rem;

}

.network-panel .field-value{

    color:var(--text-color);

    font-family:var(--font-title);

    font-size:1.2rem;

}

.network-panel .field-value[data-status="online"]{

    color:var(--cyan);

}

.network-panel .field-value[data-status="standby"]{

    color:var(--warning);

}

.network-panel .field-value[data-status="degraded"]{

    color:var(--danger);

}

.network-panel .field-value[data-status="no-active-node"]{

    color:var(--text-muted);

}


/*
    Hint
*/

.network-hint{

    color:var(--text-muted);

    font-size:var(--fs-small);

}