.status-ok { @apply text-green-500 font-bold; }
.status-bad { @apply text-red-500 font-bold; }
.status-unknown { @apply text-gray-500; }
.data-card { @apply bg-white rounded-xl shadow-lg p-6 border-l-4 transition-all duration-300 hover:shadow-xl; }
.data-card.gps { @apply border-blue-500; }
.data-card.velocity { @apply border-green-500; }
.data-card.accumulator { @apply border-yellow-500; }
.data-card.inverter { @apply border-purple-500; }
.data-card.vcu { @apply border-indigo-500; }
.value-display { @apply font-mono text-sm; }

/* Enhanced Heartbeat Indicators */
.heartbeat-indicator {
    @apply inline-block w-4 h-4 rounded-full relative;
    animation: pulse 2s infinite ease-in-out;
}
.heartbeat-ok { 
    @apply bg-green-500;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 1);
    animation: pulse-green 2s infinite;
}
.heartbeat-fail { 
    @apply bg-red-500;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 1);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-green {
    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 10px rgba(34, 197, 94, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 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 10px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.map-container {
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* GPS Ripple Effect */
.ripple-marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #60a5fa;
    position: relative;
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.8);
}

.ripple-marker::before,
.ripple-marker::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    border: 2px solid #60a5fa;
    transform: translate(-50%, -50%);
    animation: ripple 2s infinite;
}

.ripple-marker::after {
    animation-delay: 1s;
}

@keyframes ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 60px;
        height: 60px;
        opacity: 0;
    }
}

/* Collapsible sections */
.collapsible {
    cursor: pointer;
    transition: all 0.3s ease;
}
.collapsible:hover {
    background-color: #f3f4f6;
}
.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.collapsible-content.active {
    max-height: 1200px;
}

.segment-container {
    border-left: 3px solid #e5e7eb;
    padding-left: 12px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}
.segment-container:nth-child(odd) {
    border-left-color: #3b82f6;
}
.segment-container:nth-child(even) {
    border-left-color: #10b981;
}

/* Dashboard specific styles */
.dashboard-gauge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}

.dashboard-gauge::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.speed-display {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(45deg, #06b6d4, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
}

.vcu-control {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-radius: 12px;
    padding: 16px;
    color: white;
    text-align: center;
}

.inverter-card {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.btn-primary {
    @apply bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200;
}

.btn-secondary {
    @apply bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200;
}

.btn-success {
    @apply bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200;
}