/* --- Tracking Page CSS --- */

.tracking-portal {
    background-color: var(--color-gray-50);
}

.tracking-state {
    transition: opacity var(--transition-normal);
}

/* Skeleton Loading Animation */
.skeleton {
    background: #e2e5e7;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-size: 40px 100%;
    background-repeat: no-repeat;
    background-position: left -40px top 0;
    animation: shine 1.2s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton-title {
    height: 24px;
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

@keyframes shine {
    to {
        background-position: right -40px top 0;
    }
}

/* Utilities for Tracking Dashboard */
.status-indicator {
    box-shadow: 0 0 0 0 rgba(247, 201, 72, 0.7);
    animation: pulse-ring 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pulse-ring {
    to {
        box-shadow: 0 0 0 10px rgba(247, 201, 72, 0);
    }
}