/* ===================================================
   WebPulse - Tailwind Design System & Custom Utilities
   Brand Palette:
   - Primary Blue: #0057F0
   - Bright Cyan:  #12b2fc
   - Accent Green: #24ea98
   - Deep Dark:    #0e172c
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --wp-primary: #0057F0;
    --wp-cyan: #12b2fc;
    --wp-green: #24ea98;
    --wp-dark: #0e172c;
    --wp-dark-surface: #162038;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Pulse Dot Animation */
.pulse-dot {
    width: 11px;
    height: 11px;
    border-radius: 9999px;
    display: inline-block;
    position: relative;
}

.pulse-dot.dot-up {
    background-color: #24ea98;
    box-shadow: 0 0 0 0 rgba(36, 234, 152, 0.7);
    animation: pulse-green 2s infinite;
}

.pulse-dot.dot-down {
    background-color: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: pulse-red 2s infinite;
}

.pulse-dot.dot-warning {
    background-color: #f59e0b;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    animation: pulse-yellow 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(36, 234, 152, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(36, 234, 152, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(36, 234, 152, 0); }
}

@keyframes pulse-red {
    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); }
}

@keyframes pulse-yellow {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* Freshping Uptime History Bars */
.uptime-history-bar {
    display: flex;
    gap: 3px;
    align-items: center;
    height: 20px;
}

.uptime-tick {
    flex: 1;
    height: 100%;
    min-width: 4px;
    border-radius: 2px;
    background-color: #e2e8f0;
    transition: transform 0.15s, opacity 0.15s;
    cursor: pointer;
}

.uptime-tick:hover {
    transform: scaleY(1.3);
    opacity: 0.9;
}

.uptime-tick.tick-up {
    background-color: #24ea98;
}

.uptime-tick.tick-down {
    background-color: #ef4444;
}

.uptime-tick.tick-warning {
    background-color: #f59e0b;
}

/* Spinner Animation */
.spin-anim {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}