/*
 * Панель фильтров и строка применённого отбора.
 *
 * Цвета заданы через переменные, чтобы тёмная тема переопределяла их одним
 * блоком, а не переписывала правила заново.
 */
:root {
    --f-chip-bg: #eef2f6;
    --f-chip-border: #d7dee6;
    --f-chip-ink: #2f3a45;
    --f-chip-muted: #6b7885;
    --f-bar-ink: #4a5561;
    --f-group-bg: #fbfcfd;
    --f-group-line: #e4e9ee;
    --f-group-title: #46525e;
    --f-field-border: #c9ccd7;
    --f-field-bg: #ffffff;
    --f-field-ink: #2f3a45;
    --f-field-placeholder: #98a2ad;
}

.f-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

.f-bar__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.f-bar__reset {
    margin-left: 4px;
    font-size: .85rem;
    color: var(--f-bar-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.f-bar__reset:hover { color: var(--f-chip-ink); }

.f-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 320px;
    padding: 4px 6px 4px 10px;
    border: 1px solid var(--f-chip-border);
    border-radius: 14px;
    background: var(--f-chip-bg);
    color: var(--f-chip-ink);
    font-size: .82rem;
    line-height: 1.35;
}

.f-chip__label { color: var(--f-chip-muted); }

.f-chip__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.f-chip__x {
    border: 0;
    background: none;
    padding: 0 2px;
    line-height: 1;
    font-size: 1.05rem;
    color: var(--f-chip-muted);
    cursor: pointer;
}

.f-chip__x:hover { color: #c0392b; }

/* Свёрнутая панель: заголовок и содержимое убраны, карточка не занимает места. */
.f-panel--closed { display: none; }

@media (max-width: 640px) {
    .f-chip { max-width: 100%; }
    .f-bar { gap: 6px; }
}

/* ------------------------------------------------------------------ *
 * Плашки статусов над списком
 *
 * Раньше это была `.btn-group` из двадцати кнопок с синей обводкой и
 * фиолетовым счётчиком у каждой: активную среди них глаз не находил, а
 * у «Все статусы» в списке заказов вообще потерялся класс `btn`, поэтому
 * она рисовалась голым текстом. Теперь все плашки одинаково тихие, а
 * выбранная — залита акцентом.
 * ------------------------------------------------------------------ */
:root {
    --st-bg: #f1f4f8;
    --st-border: transparent;
    --st-ink: #3d4852;
    --st-bg-hover: #e3e9f0;
    --st-border-hover: transparent;
    --st-active-bg: #1d6fd0;
    --st-active-border: #1d6fd0;
    --st-active-ink: #ffffff;
    --st-count-bg: rgba(0, 0, 0, .07);
    --st-count-ink: #59636e;
}

/* `.btn-group` склеивает кнопки вплотную и сбрасывает им скругления — здесь
   нужен обычный перенос по строкам с зазором. */
.btn-group.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.btn-group.flex-wrap > .btn-chip > .fa-square,
.btn-group.flex-wrap > .btn-chip > .far {
    font-size: .62rem;
}

.btn-group.flex-wrap > .btn-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--st-border);
    border-radius: 4px;
    background: var(--st-bg);
    color: var(--st-ink);
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.3;
    box-shadow: none;
}

.btn-group.flex-wrap > .btn-chip:hover,
.btn-group.flex-wrap > .btn-chip:focus {
    background: var(--st-bg-hover);
    border-color: var(--st-border-hover);
    color: var(--st-ink);
}

.btn-group.flex-wrap > .btn-chip.active {
    background: var(--st-active-bg);
    border-color: var(--st-active-border);
    color: var(--st-active-ink);
    font-weight: 600;
    box-shadow: none;
}

.btn-group.flex-wrap > .btn-chip.active:hover {
    background: var(--st-active-bg);
    border-color: var(--st-active-border);
    color: var(--st-active-ink);
}

/*
 * Пустые статусы. В списке заказов их обычно пятнадцать из семнадцати, и в
 * полную силу они забивают собой те два, где заказы есть. Кликабельность
 * сохраняем: по наведению плашка возвращается в норму.
 */
.btn-group.flex-wrap > .btn-chip.is-empty { opacity: .5; }
.btn-group.flex-wrap > .btn-chip.is-empty:hover { opacity: 1; }
.btn-group.flex-wrap > .btn-chip.is-empty .badge.chip-count { background: transparent; }

/* Квадратик цвета статуса задан инлайном и остаётся как есть; на залитой
   плашке он читается только со светлой обводкой. */
.btn-group.flex-wrap > .btn-chip.active > .fa-square,
.btn-group.flex-wrap > .btn-chip.active > .fa-circle,
.btn-group.flex-wrap > .btn-chip.active > .far {
    text-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 2px rgba(0, 0, 0, .35);
}

.badge.chip-count {
    background: var(--st-count-bg);
    color: var(--st-count-ink);
    font-weight: 600;
    font-size: .72rem;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

.btn-chip.active .badge.chip-count,
.nav-link.active .badge.chip-count {
    background: rgba(255, 255, 255, .24);
    color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * Кнопки формы фильтров
 *
 * На них висели сеточные классы `col-md-3`, поэтому «Применить» и
 * «Экспортировать» растягивались на четверть экрана каждая и читались как
 * цветные полосы. Теперь это обычный ряд кнопок последней строкой самой
 * панели: раньше он висел под ней, у нижнего края страницы, и связь с формой
 * читалась только по расположению.
 * ------------------------------------------------------------------ */
.f-col--actions .btn {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: .4rem 1.1rem;
    border-radius: 4px;
    font-size: .85rem;
}

/* «Сбросить» — уход от отбора, а не действие: держим его слева и тихим. */
.f-col--actions .btn-chip-reset {
    border: 1px solid var(--st-border);
    background: transparent;
    color: var(--f-chip-muted);
}

.f-col--actions .btn-chip-reset:hover {
    background: var(--st-bg-hover);
    color: var(--st-ink);
}

@media (max-width: 640px) {
    .f-col--actions .btn { flex: 1 1 100%; }
    .f-col--actions .btn-chip-reset { margin-right: 0; order: 3; }
}

/* ------------------------------------------------------------------ *
 * Панель фильтров
 *
 * Три колонки: два столбца полей с подписью слева и столбец флажков; поиск —
 * отдельной строкой во всю ширину внизу.
 *
 * Раскладка задана разметкой, а не браузером. Автоматическая укладка
 * (columns, auto-fill, перенос flex) считает положение по содержимому: поле
 * переезжает из колонки в колонку от выборки к выборке, и искать нужный отбор
 * приходится каждый раз заново. Здесь колонка — это блок в разметке, и порядок
 * полей в ней не зависит ни от чего.
 * ------------------------------------------------------------------ */
.f-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .82fr);
    align-items: start;
    gap: 4px 30px;
    /* Не во всю ширину монитора: на 2560 px подписи и поля расходились по
       разным концам строки. */
    max-width: 1420px;
    padding: 18px 20px;
    border: 1px solid var(--f-group-line);
    border-radius: 8px;
    background: var(--f-group-bg);
}

.f-col { min-width: 0; }

/* Поиск — во всю ширину панели и последним: в него вставляют списки номеров
   по сотне штук, и в узкое поле они не помещаются. */
.f-col--wide {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--f-group-line);
}

@media (max-width: 1100px) {
    .f-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .f-col--checks { grid-column: 1 / -1; }
    .f-col--checks .form-group.row { display: inline-block; margin-right: 22px; }
}

@media (max-width: 640px) {
    .f-grid { grid-template-columns: 1fr; }
    .f-col--checks { grid-column: auto; }
}

/* Подпись слева, поле справа — так же, как в остальных формах панели. */
.f-grid .form-group.row {
    display: flex;
    /* Без переноса: у select2 своя минимальная ширина, и с `wrap` поле
       съезжало под подпись — вместо строки «подпись: поле» получалось два
       этажа, вдвое выше и вразнобой. */
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    min-width: 0;
}

.f-grid .form-group.row:last-child { margin-bottom: 0; }

.f-grid .form-group.row > label {
    display: block;
    flex: 0 0 38%;
    max-width: 38%;
    margin: 0;
    padding: 0;
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--f-chip-muted);
}

.f-grid .form-group.row > div {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    padding: 0;
}

/* «Без движения дольше» — два поля в одной строке, каждое своей долей. */
.f-grid .form-group.row > div + div { margin-left: 8px; }

.f-grid .form-group.row > div.offset-sm-3,
.f-grid .form-group.row > div.col-md-offset-4 { margin-left: 0; }

/* У поиска подпись по содержимому: колонка в 38% отняла бы у поля треть
   ширины, ради которой его сюда и вынесли. */
.f-grid .f-col--wide .form-group.row > label {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    white-space: nowrap;
}

/* Кнопки — последней строкой панели. Сброс слева, действия справа: сброс
   уводит с формы, остальные её отправляют. */
.f-col--actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--f-group-line);
}

.f-col--actions .btn-chip-reset { margin-right: auto; }

/* Столбец флажков: подписи слева у них нет, ряд идёт вплотную. */
.f-col--checks .form-group.row { margin-bottom: 4px; }

.f-grid .icheck-primary,
.f-grid .icheck-danger { display: block; }

.f-grid .icheck-primary > label,
.f-grid .icheck-danger > label {
    font-size: .84rem;
    line-height: 1.4;
    color: var(--st-ink);
}

/* ------------------------------------------------------------------ *
 * Единая высота полей
 *
 * В панели три вида управляющих элементов, и тема оформляет их по-разному:
 * текстовое поле 46 px со скруглением 5 и шрифтом 14, одиночный select2 —
 * 48 px, множественный — 36 px, скругление 4, шрифт 16 и нулевые отступы.
 * В ряду по пять полей это видно сразу: часть коробок ниже и мельче
 * остальных. Приводим все к одному размеру.
 * ------------------------------------------------------------------ */
.f-grid .form-control,
.f-grid .select2-container--default .select2-selection--single,
.f-grid .select2-container--default .select2-selection--multiple {
    /* Тема считает высоту без отступов (content-box), поэтому заданные 42 px
       превращались в 62: сверху добавлялись падинги и рамка. */
    box-sizing: border-box;
    min-height: 42px;
    height: auto;
    padding: 7px 12px;
    border: 1px solid var(--f-field-border);
    border-radius: 5px;
    background-color: var(--f-field-bg);
    font-size: .86rem;
    line-height: 1.6;
    color: var(--f-field-ink);
}

.f-grid input.form-control { height: 42px; }

/* Одиночному select2 высоту задаём жёстко: у темы внутри своя строка на 46 px,
   и от `height: auto` коробка вырастала до 62 — на двадцать выше соседних. */
/* Высота одиночного select2 держится на line-height внутреннего элемента
   (26 px) плюс отступы. Флексом центрировать нельзя: кнопка очистки внутри
   позиционируется float'ом, и во флекс-контейнере она наезжала на значение. */
.f-grid .select2-container--default .select2-selection--single {
    height: 42px;
}

/* У одиночного select2 текст лежит в своей обёртке со своими отступами и
   высотой строки — иначе он прижимается к верху коробки. */
/* Тема ставит здесь line-height: 2.875rem с !important — 46 px, и вместе с
   отступами коробка вырастала до 62. Перебить можно только тем же. */
.f-grid .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 26px !important;
    color: inherit;
    font-size: inherit;
}

.f-grid .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    right: 6px;
}

.f-grid .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--f-field-placeholder);
}

/*
 * «Результатов на странице» — единственное поле, где кнопка очистки не имеет
 * смысла: значение обязано быть всегда. Она же и мешала — стояла в потоке
 * слева от числа и читалась как часть значения («×10»).
 */
.f-grid .form-group.f-keep-label .select2-selection__clear { display: none; }

/* Множественный: список выбранного — обычный поток, без собственных отступов. */
.f-grid .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: block;
    padding: 0;
    margin: 0;
    line-height: 26px;
}

.f-grid .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0;
    height: 26px;
    line-height: 26px;
    font-size: inherit;
    color: inherit;
}

.f-grid .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 2px 4px 2px 0;
    padding: 0 6px;
    border-radius: 3px;
    line-height: 22px;
    font-size: .8rem;
}