.team-members__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.team-members__alert {
    border-radius: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    padding: 0.625rem 0.75rem;
}

.team-members__alert--error {
    background: color-mix(in srgb, var(--p-red-100) 82%, var(--p-content-background));
    border: 1px solid color-mix(in srgb, var(--p-red-500) 28%, var(--p-content-border-color));
    color: var(--p-red-700);
}

.team-members__alert--success {
    background: color-mix(in srgb, var(--p-green-100) 82%, var(--p-content-background));
    border: 1px solid color-mix(in srgb, var(--p-green-500) 28%, var(--p-content-border-color));
    color: var(--p-green-700);
}

.team-members__meta {
    align-items: flex-start;
    border: 1px solid var(--p-content-border-color);
    border-radius: 0.75rem;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0.75rem;
}

.team-members__header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.team-members__meta-title {
    font-size: 0.95rem;
    font-weight: 600;
}

.team-members__meta-subtitle {
    color: var(--p-text-muted-color);
    font-size: 0.82rem;
    margin-top: 0.2rem;
}

.team-members__invite-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.team-members__invite-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) 14rem;
}

.team-members__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.team-members__field label {
    font-size: 0.82rem;
    font-weight: 600;
}

.team-members__field small {
    color: var(--p-red-600);
    font-size: 0.75rem;
}

.team-members__readonly {
    background: var(--p-content-hover-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: 0.6rem;
    color: var(--p-text-muted-color);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.625rem 0.75rem;
}

.team-members__role-cell {
    min-width: 11rem;
}

.team-members__role-select {
    max-width: 12rem;
    width: 100%;
}

.team-members__actions {
    align-items: center;
    display: flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

.team-members__pending {
    border: 1px solid var(--p-content-border-color);
    border-radius: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem;
}

.team-members__pending-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.team-members__pending-title {
    font-size: 0.95rem;
    font-weight: 600;
}

:host-context(.p-dark) .team-members__alert--error {
    background: color-mix(in srgb, var(--p-red-950) 46%, var(--p-content-background));
    color: var(--p-red-300);
}

:host-context(.p-dark) .team-members__alert--success {
    background: color-mix(in srgb, var(--p-green-950) 44%, var(--p-content-background));
    color: var(--p-green-300);
}

:host-context(.p-dark) .team-members__field small {
    color: var(--p-red-300);
}

@media (max-width: 768px) {
    .team-members__meta {
        flex-direction: column;
    }

    .team-members__invite-grid {
        grid-template-columns: 1fr;
    }

    .team-members__header-actions {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .team-members__actions {
        justify-content: flex-start;
    }
}
