/* The group dropdown shares the section header row with its label — "Bill To", "Paid To",
   "Received From" — rather than stacking above the account list it filters.

   That row is already flex with space-between, the same slot .add-btn uses elsewhere, so the label
   stays left and the dropdown sits right. The one thing that has to give is .invoice-detail-header's
   15px bottom margin: margins are outside the box, so align-items:center would hang the label text
   above the dropdown's centre line. The margin moves onto the row itself, which keeps the spacing
   below the header exactly as it was. */

.account-group-row {
    margin-bottom: 15px;
}

.account-group-row .invoice-detail-header {
    margin-bottom: 0;
}

.account-group-row .account-group-select {
    width: 190px;
    /* Long labels ("Long Term Liabilities") must not push the header label off its own row. */
    max-width: 55%;
}

@media (max-width: 700px) {
    /* At the width the rest of the app folds to one column, the row is tight enough that a fixed
       190px crowds the label. */
    .account-group-row .account-group-select {
        width: auto;
        flex: 0 1 150px;
    }
}