/* Role Badge Styles */

.role-badge {
    display: inline-block;
    padding: 0.21rem 0.51rem;
    border-radius: 0.25rem;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    white-space: nowrap;
    margin-left: 0.4rem;
    vertical-align: middle;
    line-height: 1.2;
    max-width: 100px;
}

.role-badge-admin {
    background-color: var(--role-admin-bg);
    color: var(--role-admin-text);
    border-color: var(--role-admin-border);
}

.role-badge-mod {
    background-color: var(--role-mod-bg);
    color: var(--role-mod-text);
    border-color: var(--role-mod-border);
}

.role-badge-supporter {
    background-color: var(--role-supporter-bg);
    color: var(--role-supporter-text);
    border-color: var(--role-supporter-border);
}

.role-badge-user {
    background-color: var(--role-user-bg);
    color: var(--role-user-text);
    border-color: var(--role-user-border);
}


/* Role select dropdown (admin panel) */

.role-select {
    background-color: var(--nexus-input-bg);
    border-color: var(--nexus-border);
    color: var(--nexus-text);
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem;
    font-weight: 600;
}

.role-select:focus {
    background-color: var(--nexus-input-bg);
    border-color: var(--nexus-gold) !important;
    color: var(--nexus-text);
    box-shadow: 0 0 0 0.2rem rgba(240, 192, 64, 0.25);
}

.role-select option {
    background-color: var(--nexus-dark);
    color: var(--nexus-text);
    padding: 0.5rem;
}

.role-select option[value="admin"] {
    background-color: var(--role-admin-bg);
    color: var(--role-admin-text);
}

.role-select option[value="mod"] {
    background-color: var(--role-mod-bg);
    color: var(--role-mod-text);
}

.role-select option[value="supporter"] {
    background-color: var(--role-supporter-bg);
    color: var(--role-supporter-text);
}

.role-select option[value="user"] {
    background-color: var(--role-user-bg);
    color: var(--role-user-text);
}

/* Avatar border colors based on role */

.avatar-admin {
    border: 1.7px solid var(--role-admin-bg) !important;
    box-shadow: 0 0 0 0.8px var(--role-admin-border);
}

.avatar-mod {
    border: 1.7px solid var(--role-mod-bg) !important;
    box-shadow: 0 0 0 0.8px var(--role-mod-border);
}

.avatar-supporter {
    border: 1.7px solid var(--role-supporter-bg) !important;
    box-shadow: 0 0 0 0.8px var(--role-supporter-border);
}

.avatar-user {
    border: 1.7px solid var(--role-user-bg) !important;
    box-shadow: 0 0 0 0.8px var(--role-user-border);
}

/* Header profile dropdown username with role */

.username-with-role {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.username-link .username {
    color: var(--nexus-gold);
}

/* Comment author styling */

.comment-author-with-role {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.comment-avatar {
    transition: var(--transition);
}

/* Profile page role display */

.profile-role-badge {
    display: inline-block;
    margin-top: 0.5rem;
}

/* Trending mods author badge display */
.trending-mod-author-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Comment username colors based on role */

.comment-username-admin {
    color: var(--role-admin-bg);
    transition: var(--transition);
}

.comment-username-admin:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.comment-username-mod {
    color: var(--role-mod-bg);
    transition: var(--transition);
}

.comment-username-mod:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.comment-username-supporter {
    color: var(--role-supporter-bg);
    transition: var(--transition);
}

.comment-username-supporter:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.comment-username-user {
    color: var(--role-user-bg);
    transition: var(--transition);
}

.comment-username-user:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .role-badge {
        padding: 0.17rem 0.43rem;
        font-size: 0.54rem;
        margin-left: 0.3rem;
    }
    
    .avatar-admin,
    .avatar-mod,
    .avatar-supporter,
    .avatar-user {
        border-width: 1.6px !important;
    }
    
    .username-with-role,
    .comment-author-with-role {
        gap: 0.3rem;
    }
}