/* Align controls along their bottom edge, including fields with wrapped labels. */
.hp-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.hp-filter-field {
    flex: 1 1 10rem;
    min-width: 0;
    margin: 0;
}

.hp-filter-field-wide {
    flex-basis: 15rem;
}

.hp-filter-field > label {
    display: block;
    margin: 0 0 5px;
}

.hp-filter-row .hp-filter-field .form-control {
    width: 100%;
    min-width: 0;
}

.hp-filter-actions,
.hp-filter-search {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}

.hp-filter-actions {
    flex-wrap: wrap;
}

.hp-filter-search > input {
    flex: 1 1 0;
    min-width: 0;
}

.hp-filter-search > .btn,
.hp-filter-search > button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.hp-survey-filter {
    --hp-survey-control-height: 42px;
}

.hp-survey-filter .stat-filter-btn-group {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 1 1 570px;
    min-width: 0;
    gap: 4px;
    margin: 0 !important;
    border-bottom: 0 !important;
}

.hp-survey-filter .stat-filter-btn-group .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: var(--hp-survey-control-height);
    padding: 6px 4px !important;
    font-size: 13px !important;
    white-space: normal;
    line-height: 1.25;
}

.hp-survey-filter .hp-filter-field {
    flex: 1 1 310px;
}

.hp-survey-filter .hp-filter-search > .form-control,
.hp-survey-filter .hp-filter-search > .btn {
    height: var(--hp-survey-control-height);
}

@media (max-width: 639px) {
    .hp-survey-filter .stat-filter-btn-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}