/* Container for the weight status row */
.weight-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    font-weight: bold;
    padding: 10px;
}

/* The dot itself — circle shape + pulse animation */
.weight-dot {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    box-sizing: border-box;
    border-radius: 50%;
    animation: weight-pulse 2s infinite;
}

/* Pulse animation */
@keyframes weight-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

/* DOT classes (background color only) */
.dot-up {
    background-color: #4CAF50;
    /* Green for progress */
}

.dot-down {
    background-color: #f44336;
    /* Red for weight gain */
}

.dot-maintain {
    background-color: #ff9800;
    /* Orange for no change */
}

/* TEXT classes (text color only) */
.text-up {
    color: #4CAF50;
}

.text-down {
    color: #f44336;
}

.text-maintain {
    color: #ff9800;
}