/* Custom Switch Faceplate & LED styling */
.port-card {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid #334155;
    border-radius: 10px;
    padding: 8px 10px;
    width: 100%;
    max-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
    transition: all 0.25s ease;
}

/* LINK UP STYLE */
.port-card.port-up {
    background: linear-gradient(180deg, #0f2b24 0%, #091a16 100%);
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2), inset 0 2px 4px rgba(0,0,0,0.5);
}

.port-card.port-up:hover {
    border-color: #34d399;
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.35);
}

/* ACTIVE GRAPH TARGET HIGHLIGHT */
.port-card.port-chart-selected {
    box-shadow: 0 0 0 3px #a855f7, 0 0 22px rgba(168, 85, 247, 0.7) !important;
    transform: translateY(-3px) scale(1.03) !important;
    border-color: #c084fc !important;
}

/* LINK OFF / DOWN: ENTIRE PORT TURNS DEEP RED WITH RED GLOW */
.port-card.port-down {
    background: linear-gradient(180deg, #881337 0%, #4c0519 100%) !important;
    border: 2px solid #f43f5e !important;
    box-shadow: 0 0 14px rgba(244, 63, 94, 0.4), inset 0 2px 4px rgba(0,0,0,0.6) !important;
}

.port-card.port-down:hover {
    border-color: #fb7185 !important;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(244, 63, 94, 0.6) !important;
}

.port-card.port-down .rj45-socket {
    background: #25020c !important;
    border-color: #9f1239 !important;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.9) !important;
}

.port-card.port-down .rj45-socket::before {
    background: #f43f5e !important;
}

.port-card.port-down .port-down-text {
    color: #fecdd3 !important;
    font-weight: 800 !important;
}

.rj45-socket {
    width: 44px;
    height: 38px;
    background: #020617;
    border: 2px solid #1e293b;
    border-radius: 4px;
    margin-top: 4px;
    position: relative;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rj45-socket::before {
    content: "";
    width: 24px;
    height: 8px;
    background: #334155;
    position: absolute;
    top: 2px;
    border-radius: 1px;
}

.led-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0,0,0,0.5);
    transition: all 0.3s;
}

.led-green {
    background-color: #22c55e;
    box-shadow: 0 0 8px #22c55e;
}

.led-yellow {
    background-color: #eab308;
    box-shadow: 0 0 8px #eab308;
}

.led-red {
    background-color: #f43f5e;
    box-shadow: 0 0 10px #f43f5e;
}

.led-off {
    background-color: #475569;
    box-shadow: none;
}

.led-activity {
    animation: blink-activity 0.6s infinite alternate;
}

@keyframes blink-activity {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}