/* Role-based styling (global utilities only) */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.6rem; /* tightened padding */
    border-radius: 1rem;
    font-size: 0.85rem; /* slightly smaller */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    line-height: 1; /* ensure compact height */
    vertical-align: middle;
    height: auto;
    max-height: 2.2rem;
}

/* Limit icon size inside badges to avoid tall icons */
.role-badge i,
.role-badge .bi,
.role-badge [class*="fa-"] {
    font-size: 0.95rem;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

.role-admin {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.role-ceo {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.role-director {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: white;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.role-member {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.role-applicant {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3);
}

.role-public {
    background: linear-gradient(135deg, #d1d5db, #9ca3af);
    color: #374151;
    box-shadow: 0 2px 8px rgba(209, 213, 219, 0.3);
}

/* Keep role-section utilities */
.role-section {
    margin: 2rem 0;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border-left: 4px solid;
}

.role-section.applicant { background: #f9fafb; border-left-color: #6b7280; }
.role-section.member { background: #eff6ff; border-left-color: #2563eb; }
.role-section.director { background: #f5f3ff; border-left-color: #7c3aed; }
.role-section.ceo { background: #fffbeb; border-left-color: #f59e0b; }
.role-section.admin { background: #fef2f2; border-left-color: #dc2626; }

/* Small admin utilities left here */
.status-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; }
.status-label { font-weight: 600; color: #374151; }