/* Progress bar styling for the Travail section */
.progress-indicator {
    width: 100%;
    background-color: #f0f0f0; /* Light background for the progress bar container */
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin: 0 10px;
    flex-grow: 1;
}

.progress-bar {
    height: 100%;
    background-color: #222222; /* Dark color matching font color of exploration count */
    width: 0%;
    transition: width 0.3s ease-in-out;
    border-radius: 3px 0 0 3px;
}

.exploration-indicator {
    color: #222222; /* Dark font color */
    font-weight: 600;
    font-size: 0.9rem;
    margin-left: 10px;
    white-space: nowrap;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Large screens (1024px+): Enhance progress bar and indicator */
@media (min-width: 1024px) {
    .progress-indicator {
        height: 8px; /* Slightly taller progress bar */
        margin: 0 15px; /* More margin */
    }

    .progress-bar {
        height: 100%; /* Match container height */
    }

    .exploration-indicator {
        font-size: 1rem; /* Larger font */
        margin-left: 15px; /* More margin */
        gap: 6px; /* Larger gap */
    }
}

/* Extra large screens (1200px+): Optimize for ultra-wide displays */
@media (min-width: 1200px) {
    .progress-indicator {
        height: 10px; /* Even taller */
        margin: 0 20px; /* Even more margin */
    }

    .exploration-indicator {
        font-size: 1.1rem; /* Even larger font */
        margin-left: 20px; /* Even more margin */
        gap: 8px; /* Even larger gap */
    }
}