/* ============================================================
   Панель фильтров

   На телефоне фильтры складываются в столбец во всю ширину: два поля в
   ряд на экране 360px дают по 150px на каждое, и в них не видно значения.
   ============================================================ */

.filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.filters__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

@media (min-width: 640px) {
    .filters__row {
        flex-direction: row;
        align-items: flex-end;
        flex-wrap: wrap;
    }

    .filters__row > .field {
        flex: 1 1 160px;
    }
}

/* ============================================================
   Компактная панель

   Пять фильтров с подписями сверху занимали на телефоне треть экрана, а
   кнопка сброса уходила на отдельную строку. Здесь подпись перенесена в
   первый пункт списка («Все тарифы», «Любой трафик»), поля стоят в сетке
   по два, а сброс и счётчик записей делят последнюю строку.
   ============================================================ */

.filters--compact {
    padding: var(--space-2);
}

.filters--compact .filters__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--space-2);
}

/* Поиск во всю ширину: имя бота с владельцем в половине строки не видно */
.filters--compact .field--wide {
    grid-column: 1 / -1;
}

.filters--compact .filters__summary {
    justify-self: end;
}

@media (min-width: 640px) {
    .filters--compact .filters__row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    /* Ширина по содержимому: при равных долях «Все тарифы» занимали
       столько же места, сколько поиск, и ряд переносился на вторую строку */
    .filters--compact .filters__row > .field {
        flex: 0 1 auto;
    }

    .filters--compact .field--wide {
        flex: 1 1 220px;
    }

    .filters--compact .select {
        width: auto;
    }

    /* 44px нужны там, где по полю попадают пальцем; мышью хватает 36px */
    .filters--compact .input,
    .filters--compact .select {
        min-height: 36px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .filters--compact .filters__summary {
        margin-left: auto;
    }
}