.opportunities-role-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--role-tile-height);
    padding: var(--spacing-xsm) var(--spacing-sm);
    border-radius: var(--radius-card);
    border: 1px solid var(--role-tile-open-border);
    background: var(--role-tile-open-bg);
    text-align: center;
    transition: border-color 0.15s;
}

/* Shrink icon buttons inside role tiles so $ + location stack without overlap */
.opportunities-role-tile .global-header-btn.global-header-btn-icon {
    height: 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    padding: 0 !important;
    border-radius: var(--radius-button);
}

.opportunities-role-tile .global-header-btn.global-header-btn-icon i {
    font-size: var(--font-size-2xs);
}

.opportunities-role-tile .opportunities-role-tile__location {
    position: absolute !important;
    bottom: 0.1875rem !important;
    right: 0.1875rem !important;
    top: auto !important;
    left: auto !important;
    z-index: 1;
}

.opportunities-role-tile__location .bi-geo-alt-fill {
    color: var(--color-error);
}

.opportunities-role-tile__location:hover .bi-geo-alt-fill {
    /* Hover icon sits on the light tile bg, so the ink itself is the
       accent — not the white foreground meant for a filled control. */
    color: var(--color-action);
}

.opportunities-role-tile--filled {
    background: var(--role-tile-filled-bg);
    border-color: var(--role-tile-filled-border);
}

.opportunities-role-tile--mine {
    background: var(--role-tile-mine-bg);
    border-color: var(--role-tile-mine-border);
    position: relative;
    text-decoration: none;
}

.opportunities-role-tile--mine[role="link"],
a.opportunities-role-tile--mine {
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.opportunities-role-tile--mine[role="link"]:hover,
a.opportunities-role-tile--mine:hover {
    background: color-mix(in srgb, var(--color-action) 18%, white);
    border-color: var(--color-action);
}

.opportunities-role-tile__name {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    color: #374151;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opportunities-role-tile__status {
    font-size: var(--font-size-2xs);
    margin-top: var(--spacing-2xs);
}

.opportunities-role-tile__status--open {
    color: var(--color-text-muted);
}

.opportunities-role-tile__status--filled {
    color: var(--color-action-pressed);
}