/* Custom Styles for System & Network Monitoring Dashboard */

:root {
    --transition-speed: 0.25s;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.4);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.7);
}

/* Status Pulse Animation */
@keyframes pulse-ring {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes pulse-ring-danger {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.status-dot-online {
    animation: pulse-ring 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.status-dot-offline {
    animation: pulse-ring-danger 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

/* Card Subtle Glassmorphism & Hover */
.glass-card {
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.glass-card:hover {
    transform: translateY(-2px);
}

/* Rotating icon during refresh */
.spin-active {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Progress bar animation for refresh timer */
.refresh-progress-bar {
    transition: width 1s linear;
}

/* Uptime Digit Card */
.time-box {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.1) 100%);
}

/* Monospace formatting for IPs, MAC, and metrics */
.font-mono-code {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}