/* 1. The Outer Track (Container) */
.role-toggle-pill {
    display: inline-flex;
    align-items: center;
    background-color: #e9ecef; /* Light gray background for the "track" */
    padding: 4px; /* Creates an inner border around the active pill */
    border-radius: 50px; /* Makes the outer container a pill shape */
    gap: 4px; /* Small space between the links */
}

/* 2. The Individual Toggle Links */
.role-toggle-pill .pill-link {
    display: inline-block;
    text-decoration: none;
    color: #6c757d; /* Muted text color for inactive tabs */
    padding: 6px 16px;
    border-radius: 50px; /* Matches the pill shape of the container */
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease-in-out; /* Smooth transition for hover/active states */
}

/* Hover state for inactive links */
.role-toggle-pill .pill-link:hover:not(.active) {
    color: #495057; /* Darken text slightly on hover */
    background-color: rgba(0, 0, 0, 0.05); /* Very subtle background shift */
}

/* 3. The Active State */
.role-toggle-pill .pill-link.active {
    background-color: #ffffff; /* White background makes it "pop" */
    color: #212529; /* Dark text for highest contrast */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* Gives the illusion of depth */
    pointer-events: none; /* Optional: prevents clicking the page you're already on */
}

/* 4. Accessibility (Focus States) */
.role-toggle-pill .pill-link:focus-visible {
    outline: 2px solid #0d6efd; /* Distinct focus ring for keyboard navigation */
    outline-offset: 2px;
}