/*
 * Панель фильтров таблиц кабинета (payin / payout).
 * Подключается после main.css, поэтому переопределяет базовые правила блока .filter.
 */

section.cabinet_table .section .table_div .filter.filter--grid,
section.cabinet .section .table_div .filter.filter--grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    gap: 14px 12px;
    padding: 22px 25px 20px;
}

section.cabinet_table .section .table_div .filter.filter--grid .item_filter,
section.cabinet .section .table_div .filter.filter--grid .item_filter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 6px;
    margin-right: 0;
}

.filter--grid .filter_label {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #99a1b7;
    white-space: nowrap;
}

/* Одинаковая высота у всех контролов строки фильтров */
section.cabinet_table .section .table_div .filter.filter--grid .item_filter .inputs input,
section.cabinet .section .table_div .filter.filter--grid .item_filter .inputs input {
    height: 38px;
    width: 150px;
    border-radius: 6px;
}

section.cabinet_table .section .table_div .filter.filter--grid .item_filter .inputs {
    gap: 0;
}

/* Диапазоны (сумма) — две склеенные ячейки */
section.cabinet_table .section .table_div .filter.filter--grid .item_filter .inputs.inputs--range input {
    width: 110px;
}

section.cabinet_table .section .table_div .filter.filter--grid .item_filter .inputs.inputs--range input:first-child {
    border-radius: 6px 0 0 6px;
}

section.cabinet_table .section .table_div .filter.filter--grid .item_filter .inputs.inputs--range input:last-child {
    border-radius: 0 6px 6px 0;
    border-left: 1px solid #e3e5ec;
}

/* Даты: два поля с иконкой календаря */
section.cabinet_table .section .table_div .filter.filter--grid .item_filter .inputs.inputs--dates {
    gap: 6px;
}

/* ширину держит обёртка, поле занимает её целиком — иначе иконка
   (позиционируется от обёртки) уезжает за пределы серой рамки поля */
.filter--grid .input-with-icon_calendar {
    position: relative;
    display: block;
    width: 140px;
}

section.cabinet_table .section .table_div .filter.filter--grid .item_filter .inputs.inputs--dates input,
section.cabinet .section .table_div .filter.filter--grid .item_filter .inputs.inputs--dates input {
    width: 100%;
    border-radius: 6px;
    padding-right: 32px;
}

.filter--grid .input-with-icon_calendar .icon-calendar {
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1;
    color: #99a1b7;
    pointer-events: none;
}

/* Селекты (SumoSelect) */
.filter--grid .item_filter .select,
.filter--grid .item_filter .SumoSelect {
    width: 190px;
}

.filter--grid .item_filter--requisite .select,
.filter--grid .item_filter--requisite .SumoSelect {
    width: 300px;
}

/* подписи реквизитов длинные — выпадающий список шире самого поля */
section.cabinet_table .section .table_div .filter.filter--grid .item_filter--requisite .SumoSelect .optWrapper {
    min-width: 380px;
}

section.cabinet_table .section .table_div .filter.filter--grid .item_filter .SumoSelect .CaptionCont {
    height: 38px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 6px;
}

section.cabinet_table .section .table_div .filter.filter--grid .item_filter .SumoSelect .CaptionCont > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Кнопки действий */
section.cabinet_table .section .table_div .filter.filter--grid .item_filter--actions,
section.cabinet .section .table_div .filter.filter--grid .item_filter--actions {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
}

section.cabinet_table .section .table_div .filter.filter--grid .blue-button,
section.cabinet_table .section .table_div .filter.filter--grid .grey-button {
    height: 38px;
    margin: 0;
    padding: 0 16px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

section.cabinet_table .section .table_div .filter.filter--grid .blue-button i {
    font-size: 17px;
    line-height: 1;
}

/* Тёмная тема */
[data-theme="dark"] .filter--grid .filter_label {
    color: #8b93a7;
}

[data-theme="dark"] section.cabinet_table .section .table_div .filter.filter--grid .item_filter .inputs.inputs--range input:last-child {
    border-left: 1px solid #2a2f3a;
}

[data-theme="dark"] .filter--grid .input-with-icon_calendar .icon-calendar {
    color: #8b93a7;
}

/* dark.css красит любой .datepicker как поверхность попапа календаря (#111317, с !important),
   из-за чего поля дат в фильтрах выпадали из общего ряда — возвращаем им фон обычного инпута */
[data-theme="dark"] section.cabinet_table .section .table_div .filter.filter--grid .item_filter .inputs.inputs--dates input.datepicker,
[data-theme="dark"] section.cabinet .section .table_div .filter.filter--grid .item_filter .inputs.inputs--dates input.datepicker {
    background-color: #1a1d23 !important;
}

/* Узкие экраны: панель фильтров в одну колонку по ширине контента */
@media (max-width: 768px) {
    section.cabinet_table .section .table_div .filter.filter--grid,
    section.cabinet .section .table_div .filter.filter--grid {
        padding: 18px 15px;
        gap: 12px;
    }

    .filter--grid .item_filter,
    .filter--grid .item_filter .select,
    .filter--grid .item_filter .SumoSelect,
    .filter--grid .item_filter--requisite .select,
    .filter--grid .item_filter--requisite .SumoSelect {
        width: 100%;
    }

    section.cabinet_table .section .table_div .filter.filter--grid .item_filter .inputs input,
    section.cabinet_table .section .table_div .filter.filter--grid .item_filter .inputs.inputs--range input,
    section.cabinet_table .section .table_div .filter.filter--grid .item_filter .inputs.inputs--dates input {
        width: 100%;
    }

    .filter--grid .item_filter .inputs.inputs--range,
    .filter--grid .item_filter .inputs.inputs--dates {
        width: 100%;
    }

    .filter--grid .item_filter .inputs.inputs--dates .input-with-icon_calendar {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: auto;
    }

    .filter--grid .item_filter--actions {
        width: 100%;
        margin-left: 0;
    }

    section.cabinet_table .section .table_div .filter.filter--grid .blue-button,
    section.cabinet_table .section .table_div .filter.filter--grid .grey-button {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
}

/* Номер реквизита в таблице сделок — ссылка на фильтр по этому реквизиту */
.list_operations .requisite_filter_link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed #b5bcd0;
    cursor: pointer;
}

.list_operations .requisite_filter_link:hover {
    color: #3e97ff;
    border-bottom-color: #3e97ff;
}

[data-theme="dark"] .list_operations .requisite_filter_link {
    border-bottom-color: #3a4152;
}