/* Broadcast — recipient card lists */

/* Action toolbar — must beat buttons.css (.page main article.content .btn-outline-*) */
.page main article.content .broadcast-page .broadcast-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.page main article.content .broadcast-page .broadcast-actions-bar__cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.page main article.content .broadcast-page .broadcast-actions-bar__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.page main article.content .broadcast-page .broadcast-test-email-input {
    width: min(100%, 14rem);
    min-width: 10rem;
}

.page main article.content .broadcast-page .broadcast-actions-bar__group--test-email {
    flex: 1 1 auto;
    min-width: min(100%, 18rem);
}

.page main article.content .broadcast-page .broadcast-actions-bar__sep {
    flex-shrink: 0;
    align-self: center;
    width: 1px;
    height: 1.35rem;
    margin: 0 0.875rem;
    background-color: #cbd5e1;
}

.page main article.content .broadcast-page .broadcast-actions-bar__btn--send {
    margin-left: auto;
    flex-shrink: 0;
}

.page main article.content .broadcast-page .broadcast-actions-bar .btn,
.page main article.content .broadcast-page .broadcast-compose-card .metric-panel-header .broadcast-actions-bar__btn {
    font-weight: 500;
    line-height: 1.35;
    border-radius: 0.375rem;
    font-size: var(--app-text-sm, 0.8125rem);
    --bs-btn-padding-y: 0.26rem;
    --bs-btn-padding-x: 0.55rem;
}

.page main article.content .broadcast-page .broadcast-actions-bar .btn:disabled,
.page main article.content .broadcast-page .broadcast-compose-card .metric-panel-header .broadcast-actions-bar__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.broadcast-recipient-list--families-with-subjects {
    grid-template-columns:
        minmax(3rem, 3rem)
        minmax(10rem, 1.5fr)
        minmax(6rem, 0.9fr)
        minmax(7rem, 1fr)
        minmax(9rem, 1.2fr)
        minmax(7rem, 0.9fr)
        minmax(8rem, 1fr);
    min-width: 50rem;
}

.broadcast-recipient-group {
    margin-bottom: 1.25rem;
}

.broadcast-recipient-group:last-child {
    margin-bottom: 0;
}

.broadcast-recipient-group__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.35rem 0.15rem 0.45rem;
    border-bottom: 1px solid #e2e8f0;
}

.broadcast-recipient-group__title {
    margin: 0;
    font-size: var(--app-text-base, 0.9375rem);
    font-weight: 600;
    color: #0f172a;
}

.broadcast-recipient-group__count {
    font-size: var(--app-text-sm, 0.8125rem);
    color: var(--app-text-muted, #1e293b);
}

.broadcast-recipient-group__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: auto;
}

.broadcast-recipient-list--families {
    grid-template-columns:
        minmax(3rem, 3rem)
        minmax(10rem, 1.5fr)
        minmax(6rem, 0.9fr)
        minmax(9rem, 1.2fr)
        minmax(7rem, 0.9fr)
        minmax(8rem, 1fr);
    min-width: 44rem;
}

.broadcast-recipient-list--staff {
    grid-template-columns:
        minmax(3rem, 3rem)
        minmax(10rem, 1.4fr)
        minmax(6rem, 0.85fr)
        minmax(6rem, 0.85fr)
        minmax(9rem, 1.1fr)
        minmax(7rem, 0.85fr)
        minmax(8rem, 1fr);
    min-width: 52rem;
}

.broadcast-recipient-list .broadcast-recipient-row > .directory-card-row__meta:nth-child(4),
.broadcast-recipient-list .broadcast-recipient-row > .directory-card-row__meta:nth-child(5),
.broadcast-recipient-list--staff .broadcast-recipient-row > .directory-card-row__meta:nth-child(6) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .broadcast-recipient-list--families {
        min-width: 40rem;
    }

    .broadcast-recipient-list--staff {
        min-width: 46rem;
    }
}