.us-show-filter {
    overflow: hidden!important;
}

/* PLQM-1596: Bootstrap навешивает на .btn системное webkit-фокус-кольцо
   (outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px),
   которое jQuery UI показывает при автофокусе кнопок диалога фильтра —
   выглядит как «странная» обводка. Убираем её при работе мышью,
   но оставляем фокус-индикатор для клавиатуры (:focus-visible). */
.ui-dialog .ui-dialog-buttonpane .btn:focus,
.ui-dialog .ui-dialog-buttonpane .btn.focus {
    outline: none;
    box-shadow: none;
}

.ui-dialog .ui-dialog-buttonpane .btn:focus-visible {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.us-filter-condition-select
{
    width:80pt;
}

.us-filter-pane
{
    font-size: 14px;
}

.us-filter-pane-inline
{
    font-size: 14px;
    display: inline;
    margin-right: 5pt;
    padding-right: 5pt;
}

.us-report-filter-button-container
{
    vertical-align: top;
    padding-right: 5pt;
}

.us-composite-filter .selector {
    width: 950px;
}
.us-composite-filter .selector-available, .us-composite-filter .selector-chooser, .us-composite-filter .selector-chosen
{
    float: left
}
/*.us-composite-filter .selector-chosen {*/
    /*float: right;*/
/*}*/
.us-composite-filter .selector-available, .us-composite-filter .selector-chosen {
    width: 46%;
}
.us-composite-filter .selector-available select {
    height: 200px;
}
.us-composite-filter .selector-chosen select {
    height: 236px;
}


.us-composite-filter .selector-chooser
{
    list-style: none;
    margin: 70px 10px 0 -20px;
}

.us-composite-filter .selector-chooser li {
    list-style: none;
    line-height: 18px;
}

.us-composite-filter .selector-chooser li:first-child a {
    background-position: -260px -92px;
}

.us-composite-filter .selector-chooser li:first-child a {
    background-position: -260px -92px;
}

.us-composite-filter .selector-chooser li a
{
    white-space: nowrap;
    overflow: hidden;
    width: 14px;
    height: 14px;
    background-image: url("images/glyphicons-halflings.png");
    opacity: .6;
    margin: 0;
    display: block;
    padding: 14px;
    border: 1px solid transparent;
    background-position: -236px -92px;
    text-indent: 9999px;
}

.us-composite-filter .selector-filter {
    margin-right: 0;
    position: relative;
    margin-bottom: 0;
}

.us-composite-filter .selector-filter input {
    width: 100%;
    display: block;
}

.us-composite-filter .selector-filter label {
    position: absolute;
    right: 0;
    top: 4px;
    margin-right: 6px;
    opacity: .2;
}



/*!* SELECTOR (FILTER INTERFACE) *!*/

/*.app-auth .selector {*/
/*    width: 800px;*/
/*    float: left;*/
/*    display: flex;*/
/*}*/

/*.app-auth .selector select {*/
/*    width: 380px;*/
/*    height: 17.2em;*/
/*    flex: 1 0 auto;*/
/*}*/

/*.app-auth .selector-available,*/
/*.app-auth .selector-chosen {*/
/*    width: 380px;*/
/*    text-align: center;*/
/*    margin-bottom: 5px;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

/*.app-auth .selector-available h2,*/
/*.app-auth .selector-chosen h2 {*/
/*    border: 1px solid var(--border-color);*/
/*    border-radius: 4px 4px 0 0;*/
/*}*/

/*.app-auth .selector-chosen .list-footer-display {*/
/*    border: 1px solid var(--border-color);*/
/*    border-top: none;*/
/*    border-radius: 0 0 4px 4px;*/
/*    margin: 0 0 10px;*/
/*    padding: 8px;*/
/*    text-align: center;*/
/*    background: var(--primary);*/
/*    color: var(--header-link-color);*/
/*    cursor: pointer;*/
/*}*/
/*.app-auth .selector-chosen .list-footer-display__clear {*/
/*    color: var(--breadcrumbs-fg);*/
/*}*/

/*.app-auth .selector-chosen h2 {*/
/*    background: var(--primary);*/
/*    color: var(--header-link-color);*/
/*}*/

/*.app-auth .selector .selector-available h2 {*/
/*    background: var(--darkened-bg);*/
/*    color: var(--body-quiet-color);*/
/*}*/

/*.app-auth .selector .selector-filter {*/
/*    border: 1px solid var(--border-color);*/
/*    border-width: 0 1px;*/
/*    padding: 8px;*/
/*    color: var(--body-quiet-color);*/
/*    font-size: 0.625rem;*/
/*    margin: 0;*/
/*    text-align: left;*/
/*}*/

/*.app-auth .selector .selector-filter label,*/
/*.app-auth .inline-group .aligned .selector .selector-filter label {*/
/*    float: left;*/
/*    margin: 7px 0 0;*/
/*    width: 18px;*/
/*    height: 18px;*/
/*    padding: 0;*/
/*    overflow: hidden;*/
/*    line-height: 1;*/
/*}*/

/*.app-auth .selector .selector-available input,*/
/*.app-auth .selector .selector-chosen input {*/
/*    width: 320px;*/
/*    margin-left: 8px;*/
/*}*/

/*.app-auth .selector ul.selector-chooser {*/
/*    align-self: center;*/
/*    width: 22px;*/
/*    background-color: var(--selected-bg);*/
/*    border-radius: 10px;*/
/*    margin: 0 5px;*/
/*    padding: 0;*/
/*    transform: translateY(-17px);*/
/*}*/

/*.app-auth .selector-chooser li {*/
/*    margin: 0;*/
/*    padding: 3px;*/
/*    list-style-type: none;*/
/*}*/

/*.app-auth .selector select {*/
/*    padding: 0 10px;*/
/*    margin: 0 0 10px;*/
/*    border-radius: 0 0 4px 4px;*/
/*}*/
/*.app-auth .selector .selector-chosen--with-filtered select {*/
/*    margin: 0;*/
/*    border-radius: 0;*/
/*    height: 14em;*/
/*}*/

/*.app-auth .selector .selector-chosen:not(.selector-chosen--with-filtered) .list-footer-display {*/
/*    display: none;*/
/*}*/

/*.app-auth .selector-add,*/
/*.app-auth .selector-remove {*/
/*    width: 16px;*/
/*    height: 16px;*/
/*    display: block;*/
/*    text-indent: -3000px;*/
/*    overflow: hidden;*/
/*    cursor: default;*/
/*    opacity: 0.55;*/
/*}*/

/*.app-auth .active.selector-add,*/
/*.app-auth .active.selector-remove {*/
/*    opacity: 1;*/
/*}*/

/*.app-auth .active.selector-add:hover,*/
/*.app-auth .active.selector-remove:hover {*/
/*    cursor: pointer;*/
/*}*/

/*.app-auth .selector-add {*/
/*    background: url(/static/admin/img/selector-icons.svg) 0 -96px no-repeat;*/
/*}*/

/*.app-auth .active.selector-add:focus,*/
/*.app-auth .active.selector-add:hover {*/
/*    background-position: 0 -112px;*/
/*}*/

/*.app-auth .selector-remove {*/
/*    background: url(/static/admin/img/selector-icons.svg) 0 -64px no-repeat;*/
/*}*/

/*.app-auth .active.selector-remove:focus,*/
/*.app-auth .active.selector-remove:hover {*/
/*    background-position: 0 -80px;*/
/*}*/

/*.app-auth a.selector-chooseall,*/
/*.app-auth a.selector-clearall {*/
/*    display: inline-block;*/
/*    height: 16px;*/
/*    text-align: left;*/
/*    margin: 1px auto 3px;*/
/*    overflow: hidden;*/
/*    font-weight: bold;*/
/*    line-height: 16px;*/
/*    color: var(--body-quiet-color);*/
/*    text-decoration: none;*/
/*    opacity: 0.55;*/
/*}*/

/*.app-auth a.active.selector-chooseall:focus,*/
/*.app-auth a.active.selector-clearall:focus,*/
/*.app-auth a.active.selector-chooseall:hover,*/
/*.app-auth a.active.selector-clearall:hover {*/
/*    color: var(--link-fg);*/
/*}*/

/*.app-auth a.active.selector-chooseall,*/
/*.app-auth a.active.selector-clearall {*/
/*    opacity: 1;*/
/*}*/

/*.app-auth a.active.selector-chooseall:hover,*/
/*.app-auth a.active.selector-clearall:hover {*/
/*    cursor: pointer;*/
/*}*/

/*.app-auth a.selector-chooseall {*/
/*    padding: 0 18px 0 0;*/
/*    background: url(/static/admin/img/selector-icons.svg) right -160px no-repeat;*/
/*    cursor: default;*/
/*}*/

/*.app-auth a.active.selector-chooseall:focus,*/
/*.app-auth a.active.selector-chooseall:hover {*/
/*    background-position: 100% -176px;*/
/*}*/

/*.app-auth a.selector-clearall {*/
/*    padding: 0 0 0 18px;*/
/*    background: url(/static/admin/img/selector-icons.svg) 0 -128px no-repeat;*/
/*    cursor: default;*/
/*}*/

/*.app-auth a.active.selector-clearall:focus,*/
/*.app-auth a.active.selector-clearall:hover {*/
/*    background-position: 0 -144px;*/
/*}*/

.app-auth .selector-chooser {
    display: none!important;
}

/* ─────────────────────────────────────────────────────────────────────
 * PLQM-1789: диалог «Фильтр» в дизайн-системе.
 *
 * Скин применяется ТОЛЬКО когда диалогу навешан класс us-modal-jq
 * (см. composite_filter.js — навешивается лишь если на странице
 * загружен us_modal.css, т.е. на дашбордах/отчётах). На страницах без
 * DS-скина (base.html, collaboration/home_index) класс не добавляется,
 * эти правила не матчатся, диалог остаётся в легаси-виде — регрессий нет.
 *
 * Все селекторы под .ui-dialog.us-modal-jq + фильтр-специфичный класс,
 * поэтому не текут ни на другие us-modal-jq модалки (chart settings,
 * alert, discard — в них нет .selector/.us-composite-filter), ни в
 * Django-admin (там свой бандл admin-filter.js без этих файлов).
 *
 * Цвета — только токены design_tokens.css (var(--pq-*)), без hex.
 * Метрики фиксированы, чтобы верх обоих списков совпадал:
 *   h4-блок 24px, поиск-блок 42px (34 инпут + 8 отступ), список 200px.
 *   Правый список резервирует 42px сверху (margin-top).
 * ───────────────────────────────────────────────────────────────────── */

/* Ширину диалога задаёт .dialog({width:720}) в composite_filter.js (как
 * эталонный --lg). Контент заполняет её целиком (не «жмётся» влево и не
 * оставляет пустоту справа). */
.ui-dialog.us-modal-jq .us-show-filter { width: auto; }
.ui-dialog.us-modal-jq .us-composite-filter { width: 100%; table-layout: fixed; }

/* Ограничение высоты: диалог не выше 88vh, тело — со скроллом, чтобы окно не
 * налезало на хедер и не тянулось до низа экрана (даже при одном условии).
 * `.us-show-filter` (== .ui-dialog-content) в composite_filter.css выше стоит
 * overflow:hidden!important — перебиваем на auto, иначе содержимое клипается,
 * а не скроллится. Ре-центрирование — в open-хэндлере (composite_filter.js). */
.ui-dialog.us-modal-jq.us-filter-modal { max-height: 88vh; }
.ui-dialog.us-modal-jq.us-filter-modal .us-show-filter {
    overflow-y: auto !important; overflow-x: hidden !important;
}

/* ── АДАПТИВНАЯ высота списков. Тело (.us-show-filter) — обычный
 * блок-контейнер со скроллом (overflow-y:auto выше), высота ограничена
 * 88vh − шапка/футер. Высоту списков считаем от вьюпорта:
 *   height = clamp(160, 88vh − «хром без списка», 320).
 * Итог: при ОДНОМ условии список забирает остаток высоты (диалог влезает в
 * кап без внутреннего скролла, «Добавить условие» видна); при НЕСКОЛЬКИХ
 * условиях каждый список берёт ту же высоту → сумма превышает кап → тело
 * скроллится. Порог 430px ≈ вертикальный «хром» одного условия (шапка,
 * поле «Уровень», h4, поиск/чипы, счётчик, ссылки, «Добавить условие»,
 * футер). Не flex-цепочка: она давала переполнение при нескольких условиях
 * (список не мог ужаться ниже min и наезжал на «Добавить временной отрезок»).
 * Сама height-формула — на правиле .selector select.filtered ниже. */
.ui-dialog.us-modal-jq .us-composite-filter hr {
    border: 0; border-top: 1px solid var(--pq-surface-200); margin: 12px 0;
}
/* Гасим bootstrap-строки (.row: margin -15px) и паддинги колонок внутри
 * блока условия — иначе шапка «съезжала» на 15px левее списков и липла
 * к краю окна. Всё выравнивается по 16px inner-padding'у .ui-dialog-content. */
.ui-dialog.us-modal-jq .us-filter-element .row { margin-left: 0; margin-right: 0; }
.ui-dialog.us-modal-jq .us-filter-pane.col-lg-12 { padding-left: 0; padding-right: 0; }

/* ── шапка: только «Уровень» (label сверху, контрол на всю ширину — как поле
 *    «Сценарий» в routineModal). «Условие» скрыто: его роль выполняет
 *    чипы-радио «Включить/Исключить» над «Выбранными опциями» (см. .pqf-cond-chips ниже). ── */
.ui-dialog.us-modal-jq .us-filter-element { position: relative; }
.ui-dialog.us-modal-jq .us-filter-header {
    display: block; margin: 0 0 8px;
}
/* скрываем поле «Условие» — сам <select> остаётся в DOM для _getFilter */
.ui-dialog.us-modal-jq .us-filter-condition { display: none; }
.ui-dialog.us-modal-jq .us-filter-level {
    width: 100%; float: none; padding: 0; margin: 0 0 12px;
}
/* PLQM-1789 (замечание руководителя): подпись «Уровень» — в один стиль с
 * заголовками колонок «ДОСТУПНЫЕ/ВЫБРАННЫЕ ОПЦИИ» (.selector h4): 12px, 600,
 * surface-500, uppercase, letter-spacing. */
.ui-dialog.us-modal-jq .pqf-lbl {
    display: block; margin: 0 0 8px;
    font-size: 12px; font-weight: 600; color: var(--pq-surface-500);
    text-transform: uppercase; letter-spacing: .05em;
}
.ui-dialog.us-modal-jq .us-filter-condition-select.form-control,
.ui-dialog.us-modal-jq .us-filter-level-select,
.ui-dialog.us-modal-jq .us-filter-level .select2-container {
    width: 100% !important; min-width: 0;
}
/* PLQM-1789 (замечание руководителя): стабильная высота контрола уровня, чтобы
 * до загрузки уровней (пока нативный <select>) он не был «узким» и не прыгал в
 * полную высоту после инициализации select2. 34px = высота select2-selection. */
.ui-dialog.us-modal-jq .us-filter-level-select { height: 34px; box-sizing: border-box; }
.ui-dialog.us-modal-jq .us-filter-level .select2-container { min-height: 34px; }
.ui-dialog.us-modal-jq .us-filter-condition-select.form-control {
    height: 34px; font-size: 13px; box-shadow: none;
    border: 1px solid var(--pq-surface-300); border-radius: var(--pq-radius-md);
}
.ui-dialog.us-modal-jq .us-filter-condition-select.form-control:focus {
    border-color: var(--pq-primary); box-shadow: var(--pq-focus-ring); outline: none;
}
/* «удалить условие» — компактный × справа НА УРОВНЕ строки «Уровень» (её
 * селект), а не в пустом верхнем углу под заголовком диалога. Резервируем
 * справа жёлоб (padding-right у шапки), чтобы × не налезал на селект.
 * PLQM-1789 (замечание руководителя): × центрируем по СЕЛЕКТУ через нижнюю
 * привязку, а не магическим top. Селект прижат к низу строки (align-items:
 * flex-end), а шапка ниже него ровно на margin-bottom строки «Уровень» (12px).
 * Значит bottom:12px ставит НИЗ × на низ селекта, а height:34 (= высота
 * селекта) → × занимает ровно вертикаль селекта. Не зависит от высоты подписи
 * и от наличия сегмента «Способ выбора» — работает и для гео, и для не-гео. */
.ui-dialog.us-modal-jq .us-filter-has-remove .us-filter-header { padding-right: 34px; }
.ui-dialog.us-modal-jq .us-filter-header { position: relative; }
.ui-dialog.us-modal-jq .us-filter-remove {
    position: absolute; bottom: 12px; top: auto; right: 0; width: 28px; height: 34px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: flex-end;
}
.ui-dialog.us-modal-jq .us-filter-remove .btn {
    padding: 4px 6px; color: var(--pq-surface-400); background: transparent; border: 0;
    box-shadow: none; border-radius: var(--pq-radius-sm);
}
.ui-dialog.us-modal-jq .us-filter-remove .btn:hover { color: var(--pq-danger); background: var(--pq-danger-50); }
.ui-dialog.us-modal-jq .us-filter-remove .btn:focus-visible {
    outline: none; box-shadow: var(--pq-focus-ring); color: var(--pq-danger);
}

/* ── две колонки списков + центральный столбец стрелок ── */
.ui-dialog.us-modal-jq .selector {
    width: auto; display: flex; align-items: stretch; gap: 16px;
}
.ui-dialog.us-modal-jq .selector-available,
.ui-dialog.us-modal-jq .selector-chosen {
    width: auto; flex: 1 1 0; min-width: 0; float: none;
    display: flex; flex-direction: column;
}
.ui-dialog.us-modal-jq .selector h4 {
    margin: 0 0 8px; height: 16px; line-height: 16px;
    font-size: 12px; font-weight: 600; color: var(--pq-surface-500);
    text-transform: uppercase; letter-spacing: .05em;
}

/* поиск (только левая колонка) — 34px + 8px отступ = 42px */
.ui-dialog.us-modal-jq .selector-filter {
    position: relative; height: 34px; margin: 0 0 8px;
}
.ui-dialog.us-modal-jq .selector-filter input.form-control {
    width: 100%; height: 34px; padding: 6px 30px; font-size: 13px; box-shadow: none;
    border: 1px solid var(--pq-surface-300); border-radius: var(--pq-radius-md);
}
.ui-dialog.us-modal-jq .selector-filter input.form-control:focus {
    border-color: var(--pq-primary); box-shadow: var(--pq-focus-ring); outline: none;
}
.ui-dialog.us-modal-jq .selector-filter label {
    position: absolute; left: 9px; right: auto; top: 50%; transform: translateY(-50%);
    margin: 0; width: 16px; height: 16px; opacity: 1; line-height: 1;
}
.ui-dialog.us-modal-jq .selector-filter label img { display: none; }
.ui-dialog.us-modal-jq .selector-filter label::before {
    content: "\f002"; font-family: "FontAwesome"; font-size: 13px; color: var(--pq-surface-400);
}
.ui-dialog.us-modal-jq .selector-filter .pqf-search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; padding: 0; border: 0; background: transparent;
    color: var(--pq-surface-400); cursor: pointer; border-radius: var(--pq-radius-sm);
    display: none; align-items: center; justify-content: center; line-height: 1;
}
.ui-dialog.us-modal-jq .selector-filter .pqf-search-clear:hover {
    color: var(--pq-surface-700); background: var(--pq-surface-100);
}
.ui-dialog.us-modal-jq .selector-filter.pqf-has-value .pqf-search-clear { display: inline-flex; }

/* режим «Включить/Исключить» над «Выбранными опциями» — outline-чипы с
 * радиокнопкой (вариант B, выбран Андреем). Блок 42px по высоте (34 + 8),
 * симметрично поисковой строке слева, чтобы верх правого списка совпадал
 * с левым. Активный чип — primary-рамка + primary-50 фон + залитая радио-точка. */
.ui-dialog.us-modal-jq .selector-chosen .pqf-cond-chips {
    display: flex; gap: 8px; margin: 0 0 8px; height: 34px;
}
.ui-dialog.us-modal-jq .pqf-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 34px;
    padding: 0 12px; margin: 0; cursor: pointer;
    border: 1px solid var(--pq-surface-300); border-radius: 999px;
    font-size: 13px; font-weight: 500; color: var(--pq-surface-600);
    transition: background-color .12s, border-color .12s, color .12s;
}
.ui-dialog.us-modal-jq .pqf-chip input {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.ui-dialog.us-modal-jq .pqf-chip__mark {
    flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--pq-surface-400); box-sizing: border-box;
    transition: border-color .12s, background .12s;
}
.ui-dialog.us-modal-jq .pqf-chip:not(.is-active):hover {
    background: var(--pq-surface-50); color: var(--pq-surface-900);
}
.ui-dialog.us-modal-jq .pqf-chip.is-active {
    border-color: var(--pq-primary); color: var(--pq-primary-700); background: var(--pq-primary-50);
}
.ui-dialog.us-modal-jq .pqf-chip.is-active .pqf-chip__mark {
    border-color: var(--pq-primary);
    background: radial-gradient(var(--pq-primary) 0 45%, transparent 50%);
}
.ui-dialog.us-modal-jq .pqf-chip input:focus-visible + .pqf-chip__mark {
    box-shadow: var(--pq-focus-ring); border-radius: 50%;
}

/* списки — АДАПТИВНАЯ высота: забирают остаток высоты тела (flex:1) в пределах
 * min 160 / max 320. Верх обоих списков выровнен: слева поиск (42px), справа
 * чипы-радио (42px). width:100% + min-width:0 на колонке — критично: без явной
 * ширины <select> раздувается под самый длинный <option> и растягивает диалог;
 * так длинное имя усекается по ширине колонки (полное — в title).
 * height:auto — высотой управляет flexbox (см. блок «адаптивная высота» ниже). */
.ui-dialog.us-modal-jq .selector select.filtered {
    width: 100%; padding: 4px; margin: 0; min-height: 160px;
    /* Точную высоту ставит JS (_sizeLists в composite_filter.js): честно
     * меряет фактический «хром» и заполняет остаток до 88vh, чтобы при одном
     * условии тело НЕ скроллилось. Значение ниже — только фолбэк, если JS не
     * отработал; JS перекрывает его инлайном с !important. */
    height: 240px !important;
    font-size: 13px; box-shadow: none; background: var(--pq-surface-0);
    border: 1px solid var(--pq-surface-300); border-radius: var(--pq-radius-md);
}
.ui-dialog.us-modal-jq .selector-chosen select.filtered { margin-top: 0; }
.ui-dialog.us-modal-jq .selector select.filtered:focus {
    border-color: var(--pq-primary); box-shadow: var(--pq-focus-ring); outline: none;
}
/* border-radius:0 + без вертикальных зазоров — соседние выделенные строки
 * сливаются в единый блок (как выделение в гриде), а не «пилюли» по строке. */
.ui-dialog.us-modal-jq .selector select.filtered option {
    padding: 3px 8px; border-radius: 0; margin: 0; color: var(--pq-surface-900);
}
.ui-dialog.us-modal-jq .selector select.filtered option:hover {
    background: var(--pq-surface-100);   /* мягкий hover как в гриде */
}
/* selected — мягкая заливка primary-50 + обычный (тёмный primary-700) текст,
 * как выделение блока в гриде. Blink в фокусе списка принудительно красит
 * текст выделенного <option> белым и игнорирует `color`; перебиваем это через
 * -webkit-text-fill-color (он выигрывает у системного цвета выделения).
 * linear-gradient — приём перебить нативную заливку фона <option> в Blink. */
.ui-dialog.us-modal-jq .selector select.filtered option:checked {
    background: var(--pq-primary-50) linear-gradient(0deg, var(--pq-primary-50), var(--pq-primary-50));
    color: var(--pq-primary-700);
    -webkit-text-fill-color: var(--pq-primary-700);
}

/* под списком — одна строка: счётчик слева, «Выбрать/Удалить всё» справа */
.ui-dialog.us-modal-jq .pqf-list-footer {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-top: 6px; min-height: 16px;
}
.ui-dialog.us-modal-jq .pqf-count {
    margin: 0; font-size: 12px; color: var(--pq-surface-500); line-height: 16px;
}

/* столбец стрелок — центрируем по полосе списков. Колонка тянется на всю
 * высоту (.selector align-items:stretch); над списком слева/справа по 66px
 * (h4 24 + поиск/чипы 42), под списком ~22px (одна строка: счётчик+ссылка) —
 * симметричные паддинги + justify-center сажают стрелки ровно на центр списка. */
.ui-dialog.us-modal-jq .selector-chooser {
    float: none; margin: 0; padding: 66px 0 22px; list-style: none;
    align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.ui-dialog.us-modal-jq .selector-chooser li { list-style: none; margin: 0; line-height: 1; }
.ui-dialog.us-modal-jq .selector-chooser li a {
    width: 32px; height: 32px; padding: 0; margin: 0; text-indent: 0; overflow: visible;
    display: inline-flex; align-items: center; justify-content: center;
    background-image: none; background-color: var(--pq-surface-0);
    border: 1px solid var(--pq-surface-300); border-radius: var(--pq-radius-md);
    color: var(--pq-surface-400); opacity: 1; cursor: default;
    transition: color .12s, background-color .12s, border-color .12s;
}
.ui-dialog.us-modal-jq .selector-chooser li a.active {
    color: var(--pq-surface-600); cursor: pointer;
}
.ui-dialog.us-modal-jq .selector-chooser li a.active:hover {
    color: var(--pq-primary); border-color: var(--pq-primary); background-color: var(--pq-primary-50);
}
.ui-dialog.us-modal-jq .selector-add,
.ui-dialog.us-modal-jq .selector-remove { font-size: 0; }
.ui-dialog.us-modal-jq .selector-add::before {
    content: "\f105"; font-family: "FontAwesome"; font-size: 16px;   /* › вправо */
}
.ui-dialog.us-modal-jq .selector-remove::before {
    content: "\f104"; font-family: "FontAwesome"; font-size: 16px;   /* ‹ влево */
}

/* «Выбрать всё» / «Удалить всё» — text-ссылки с направляющей иконкой »/« */
.ui-dialog.us-modal-jq a.selector-chooseall,
.ui-dialog.us-modal-jq a.selector-clearall {
    display: inline-flex; align-items: center; gap: 6px; margin: 0; flex: 0 0 auto;
    height: auto; padding: 0; overflow: visible; background: none; text-decoration: none;
    font-size: 12px; font-weight: 500; color: var(--pq-surface-400); opacity: 1; cursor: default;
}
.ui-dialog.us-modal-jq a.active.selector-chooseall,
.ui-dialog.us-modal-jq a.active.selector-clearall { color: var(--pq-primary); cursor: pointer; }
.ui-dialog.us-modal-jq a.active.selector-chooseall:hover,
.ui-dialog.us-modal-jq a.active.selector-clearall:hover { color: var(--pq-primary-hover); }
.ui-dialog.us-modal-jq a.selector-chooseall::before {
    content: "\f101"; font-family: "FontAwesome"; font-size: 12px;   /* » вправо */
}
.ui-dialog.us-modal-jq a.selector-clearall::before {
    content: "\f100"; font-family: "FontAwesome"; font-size: 12px;   /* « влево */
}

/* «Добавить условие» — прижата к блоку условий */
.ui-dialog.us-modal-jq .us-filter-add { margin: 16px 0 0; }

/* ── ветка временнОго измерения (календарные уровни): кнопка
 *    «Добавить временной отрезок» + строки От/До (маркеры НАЧГ/НАЧМ±N).
 *    Разметка — <table class="us-range-container"> из filter.js. ── */
/* Таблица <table class="us-range-container"> табличным auto-layout сваливала
 * весь запас ширины в первую ячейку — «От» раздувалась до ~250px и отрывалась
 * от инпута (глобальное правило держит table width:100%, width:auto не помогал).
 * Поэтому «разтабличиваем» контейнер (display:block/flex): строка От/До
 * раскладывается flex'ом, лейблы вплотную к полям, независимо от кнопки. */
.ui-dialog.us-modal-jq .us-range-container,
.ui-dialog.us-modal-jq .us-range-container > tbody { display: block; width: auto; margin-top: 4px; }
/* Строка отрезка — ОДНА строка «От [инпут] До [инпут] ×» в лёгкой карточке
 * (рамка + фон): пара визуально сгруппирована, × в конце строки однозначно
 * удаляет ВЕСЬ отрезок (title «Удалить отрезок»). tr раскладываем flex'ом,
 * td — flex-элементы; инпут-ячейки тянутся (flex:1), лейблы/× — по контенту.
 * width:auto на td перебивает глобальное filter.css td:first-of-type{250px}. */
.ui-dialog.us-modal-jq .us-filter-range {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 8px; padding: 8px 10px;
    border: 1px solid var(--pq-surface-300); border-radius: var(--pq-radius-md);
    background: var(--pq-surface-50);
}
.ui-dialog.us-modal-jq .us-filter-range > td { display: block; width: auto; padding: 0; }
.ui-dialog.us-modal-jq .us-filter-range-cell { flex: 1 1 0; min-width: 56px; }
.ui-dialog.us-modal-jq .us-add-range-button-container { display: block; }
.ui-dialog.us-modal-jq .us-add-range-button-container td { display: block; padding: 0; }
.ui-dialog.us-modal-jq .us-add-range-button { margin-top: 4px; }
.ui-dialog.us-modal-jq .us-filter-range-label {
    flex: 0 0 auto; font-size: 13px; color: var(--pq-surface-700); white-space: nowrap; padding: 0;
}
.ui-dialog.us-modal-jq .us-filter-range-from,
.ui-dialog.us-modal-jq .us-filter-range-to {
    width: 100%; height: 34px; padding: 6px 10px; font-size: 13px; box-shadow: none;
    border: 1px solid var(--pq-surface-300); border-radius: var(--pq-radius-md);
}
/* невалидный ввод границы/маркера — подсветка ДО отправки (иначе бэк падает
 * с ValueError('unsupported type ...') и запрос данных виджета рушится) */
.ui-dialog.us-modal-jq .us-filter-range-from.pqf-range-invalid,
.ui-dialog.us-modal-jq .us-filter-range-to.pqf-range-invalid {
    border-color: var(--pq-danger); box-shadow: 0 0 0 2px var(--pq-danger-50);
}
.ui-dialog.us-modal-jq .us-filter-range-remove { flex: 0 0 auto; }
.ui-dialog.us-modal-jq .us-filter-range-from:focus,
.ui-dialog.us-modal-jq .us-filter-range-to:focus {
    border-color: var(--pq-primary); box-shadow: var(--pq-focus-ring); outline: none;
}
.ui-dialog.us-modal-jq .us-remove-range-button {
    color: var(--pq-surface-400); padding: 4px 6px; border-radius: var(--pq-radius-sm);
    background: transparent; border: 0;
}
.ui-dialog.us-modal-jq .us-remove-range-button:hover {
    color: var(--pq-danger); background: var(--pq-danger-50);
}
.ui-dialog.us-modal-jq .us-remove-range-button:focus-visible {
    outline: none; box-shadow: var(--pq-focus-ring); color: var(--pq-danger);
}

/* видимые keyboard-focus состояния (мышиный фокус гасится в
 * composite_filter.css выше через :focus, клавиатурный — :focus-visible) */
.ui-dialog.us-modal-jq .selector-chooser li a.active:focus-visible,
.ui-dialog.us-modal-jq a.active.selector-chooseall:focus-visible,
.ui-dialog.us-modal-jq a.active.selector-clearall:focus-visible,
.ui-dialog.us-modal-jq .selector-filter .pqf-search-clear:focus-visible {
    outline: none; box-shadow: var(--pq-focus-ring);
    border-radius: var(--pq-radius-sm);
    color: var(--pq-primary);
}

/* ── «Сбросить фильтр»: тихая кнопка-ссылка у ЛЕВОГО края футера (симметрично
 *    Применить/Отмена справа). Позиционируем абсолютно (margin-right:auto через
 *    вложенный buttonset не срабатывал), Применить/Отмена остаются справа.
 *    Перебиваем btn-default, навешенный общим create-хуком. */
.ui-dialog.us-modal-jq.us-filter-modal .ui-dialog-buttonpane { position: relative; }
.ui-dialog.us-modal-jq .ui-dialog-buttonset .pqf-reset,
.ui-dialog.us-modal-jq .ui-dialog-buttonset .pqf-reset.btn-default {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    margin: 0 !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--pq-surface-500) !important;
    font-weight: 500;
}
.ui-dialog.us-modal-jq .ui-dialog-buttonset .pqf-reset:hover {
    color: var(--pq-danger) !important;
    background: transparent !important;
    text-decoration: underline;
}
.ui-dialog.us-modal-jq .ui-dialog-buttonset .pqf-reset:focus-visible {
    outline: none; box-shadow: var(--pq-focus-ring);
}

/* hover-состояние кнопок футера. jQuery UI на hover вешает .ui-state-hover,
 * а тема arctic (jquery-wijmo.css) ставит светлый background-image поверх
 * синего → primary-кнопка «белела». Гасим этот градиент и делаем ЗАТЕМНЕНИЕ
 * primary-hover — как у «Сохранить» в шапке дашборда. */
.ui-dialog.us-modal-jq .ui-dialog-buttonset button.btn,
.ui-dialog.us-modal-jq .ui-dialog-buttonset button.btn.ui-state-hover,
.ui-dialog.us-modal-jq .ui-dialog-buttonset button.btn:hover,
.ui-dialog.us-modal-jq .ui-dialog-buttonset button.btn:focus {
    background-image: none !important;
    text-shadow: none !important;
}
.ui-dialog.us-modal-jq .ui-dialog-buttonset button.btn-primary:hover,
.ui-dialog.us-modal-jq .ui-dialog-buttonset button.btn-primary.ui-state-hover {
    background-color: var(--pq-primary-hover) !important;
    border-color: var(--pq-primary-hover) !important;
    color: var(--pq-primary-contrast) !important;
}
.ui-dialog.us-modal-jq .ui-dialog-buttonset button.btn-default:hover,
.ui-dialog.us-modal-jq .ui-dialog-buttonset button.btn-default.ui-state-hover {
    background-color: var(--pq-surface-50) !important;
    border-color: var(--pq-surface-400) !important;
    color: var(--pq-surface-900) !important;
}

/* ── × сброса фильтра по измерению в сводке (вне диалога, рядом с описанием).
 *    Элемент создаётся только при DS-скине (JS-гейт), поэтому правило без
 *    скоупа под .ui-dialog безопасно. */
.us-filter-clear {
    margin-left: 6px;
    color: var(--pq-surface-400);
    text-decoration: none;
    cursor: pointer;
}
.us-filter-clear:hover { color: var(--pq-danger); }

/* ── PLQM-1789: fixed-позиция + modal scroll-lock + ресайз по ширине ── */
/* position:fixed — окно привязано к вьюпорту (не уезжает за оверлей при скролле). */
.ui-dialog.us-modal-jq.us-filter-modal { position: fixed !important; }

/* PLQM-1868: оверлей ИМЕННО диалога фильтра (JS вешает класс us-filter-overlay в
   open) — на весь вьюпорт. jQuery UI делает overlay position:absolute с высотой
   документа на момент открытия (инлайн width/height), из-за чего при fixed-диалоге
   и длинном/проскролленном дашборде затемнялась лишь часть. fixed+inset:0 покрывает
   вьюпорт целиком и переживает ресайз окна; !important бьёт инлайн-размеры jQuery UI.
   Класс scoped — прочие .ui-widget-overlay в проекте не затрагиваются. */
.ui-widget-overlay.us-filter-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; height: auto !important;
}

/* modal scroll-lock: пока фильтр открыт, подложка не прокручивается
   (scrollbar-gutter:stable из us_modal.css держит ширину — без дёрганья). */
html.pqf-filter-locked,
html.pqf-filter-locked body { overflow: hidden !important; }

/* ресайз за ОБЕ боковые грани (west + east) — только по ширине. Вертикальные
 * и угловые ручки прячем. Диагональное дёрганье и неверный left для west при
 * position:fixed лечатся в JS resize-хендлере (гасим вертикаль; на упоре
 * minWidth west держит правый край, east — левый). */
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-n,
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-s,
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-ne,
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-nw,
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-se,
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-sw { display: none !important; }
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-e,
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-w {
    width: 8px; top: 0; height: 100%; cursor: ew-resize; background: transparent;
}
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-e { right: 0; }
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-w { left: 0; }
/* ненавязчивая DS-риска у грани, primary на hover */
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-e::after,
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-w::after {
    content: ""; position: absolute; top: 50%; transform: translateY(-50%);
    width: 2px; height: 28px; border-radius: 1px; background: var(--pq-surface-300);
    transition: background-color .12s;
}
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-e::after { right: 2px; }
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-w::after { left: 2px; }
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-e:hover::after,
.ui-dialog.us-modal-jq.us-filter-modal .ui-resizable-w:hover::after { background: var(--pq-primary); }

/* ── PLQM-1789: «Применить» заблокирована при невалидной границе отрезка ──
 * Не нативный disabled (Chrome не показывает title-тултип на disabled-кнопке) —
 * серый вид + cursor:not-allowed; клик обезврежен guard'ом в apply. Тултип
 * «Исправьте временной отрезок» ставится через title в JS. */
.ui-dialog.us-modal-jq .ui-dialog-buttonpane .pqf-apply.pqf-btn-disabled,
.ui-dialog.us-modal-jq .ui-dialog-buttonpane .pqf-apply.pqf-btn-disabled:hover,
.ui-dialog.us-modal-jq .ui-dialog-buttonpane .pqf-apply.pqf-btn-disabled:focus {
    opacity: .5; cursor: not-allowed; box-shadow: none;
    background: var(--pq-primary); border-color: var(--pq-primary);
}

/* ── PLQM-1789: дропдаун-подсказчик маркеров границы отрезка (range_marker.js) ──
 * Список вынесен в <body> (escape overflow диалога), position:fixed по координатам
 * инпута. z-index ДОЛЖЕН быть выше самого диалога: в дашборде .ui-dialog поднят до
 * 10510/10511 !important (spread_manager.css — чтобы модал был над Wijmo-гридом),
 * поэтому список на 2100 уходил ПОД диалог и был не виден (баг: на стенде дропдаун
 * не появлялся, хотя в DOM был). Ставим 10600 — над диалогом фильтра. */
.pqf-ac-list {
    position: fixed; z-index: 10600; box-sizing: border-box;
    /* только вертикальный скролл; горизонтальный убран (PLQM-1789, замечание Андрея) */
    max-height: 200px; overflow-y: auto; overflow-x: hidden; padding: 4px;
    background: var(--pq-surface-0, #fff);
    border: 1px solid var(--pq-surface-300, #d1d5db); border-radius: 8px;
    box-shadow: var(--pq-shadow-lg, 0 12px 32px rgba(15, 23, 42, .18));
    font-size: 12.5px;
}
.pqf-ac-item {
    display: flex; align-items: baseline; gap: 10px; padding: 5px 9px;
    border-radius: 6px; cursor: pointer; white-space: nowrap; min-width: 0;
}
.pqf-ac-item.is-active, .pqf-ac-item:hover { background: var(--pq-primary-50, #eff6ff); }
.pqf-ac-label {
    flex: 0 0 auto; font-weight: 700; color: var(--pq-primary-700, #1d4ed8);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* подсказка при нехватке ширины усекается многоточием, а не тянет горизонт-скролл */
.pqf-ac-hint {
    flex: 0 1 auto; margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    color: var(--pq-surface-500, #6b7280); font-size: 11.5px;
}

/* ── PLQM-1789 (вариант A): режимы «Элементы | Диапазоны» ── */
/* «Уровень» и «Способ выбора» — в ОДНУ строку (как в концепте): селект слева
 * тянется, сегмент справа. Подписи над своими контролами, низы выровнены. */
/* PLQM-1789 (замечание руководителя): column-gap 16px — горизонтальный зазор
 * между «Уровнем» и сегментом «Способ выбора»; row-gap 0 — чтобы подпись
 * «Уровень», перенесённая на строку над select'ом (flex-wrap), не отступала от
 * него на лишние 16px. Дистанция подпись→контрол задаётся margin-bottom .pqf-lbl
 * (8px) — как «Доступные опции» → поле поиска. */
.ui-dialog.us-modal-jq .us-filter-level { display: flex; align-items: flex-end; column-gap: 16px; row-gap: 0; flex-wrap: wrap; }
.ui-dialog.us-modal-jq .pqf-level-main { flex: 1 1 240px; min-width: 0; }
.ui-dialog.us-modal-jq .pqf-mode-seg {
    display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; margin: 0;
}
.ui-dialog.us-modal-jq .pqf-mode-lab {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pq-surface-500);
}
/* Классический сегмент-контрол ДС: ЕДИНАЯ капсула — рамка и скругление только у
 * контейнера; деления внутри — прямоугольные во всю высоту (без собственного
 * скругления/полей/тени), между ними один тонкий делитель. Так две заливки
 * читаются как одна капсула, а не «два овала» (замечание Андрея). */
.ui-dialog.us-modal-jq .pqf-mode-btns {
    display: inline-flex; height: 34px; border: 1px solid var(--pq-surface-300);
    border-radius: 8px; overflow: hidden; background: var(--pq-surface-0); line-height: 0;
}
.ui-dialog.us-modal-jq .pqf-mode-btn {
    height: 100%; display: inline-flex; align-items: center; padding: 0 14px;
    font-size: 12px; font-weight: 600; color: var(--pq-surface-600); white-space: nowrap;
    background: transparent; border: 0; border-radius: 0; margin: 0; box-shadow: none;
    cursor: pointer; -webkit-appearance: none; appearance: none; outline: none;
}
.ui-dialog.us-modal-jq .pqf-mode-btn + .pqf-mode-btn { border-left: 1px solid var(--pq-surface-300); }
.ui-dialog.us-modal-jq .pqf-mode-btn:not(.is-active):hover { background: var(--pq-surface-50); }
/* Активное деление — мягкая заливка (primary-50 + тёмный текст), НЕ залитый primary. */
.ui-dialog.us-modal-jq .pqf-mode-btn.is-active { background: var(--pq-primary-50); color: var(--pq-primary-700); }
/* Предупреждение о смешанном (легаси) состоянии. */
.ui-dialog.us-modal-jq .pqf-mode-mixed {
    font-size: 11.5px; color: var(--pq-warn-700); background: var(--pq-warn-50);
    border: 1px solid #fde68a; border-radius: 7px; padding: 6px 10px; margin: 0 0 10px;
}
.ui-dialog.us-modal-jq .pqf-mode-mixed[hidden] { display: none; }

/* Режим «Элементы»: блок диапазонов скрыт. */
.ui-dialog.us-modal-jq .us-mode-elements .us-range-container { display: none; }
/* Режим «Диапазоны»: правый список/лупа/поиск/футер скрыты — только карточки.
   PLQM-1959: переключатель «Включить/Исключить» (.pqf-cond-row) здесь БОЛЬШЕ
   НЕ ПРЯЧЕМ. Раньше он был скрыт, но продолжал действовать: значение переживало
   смену режима и уходило в сохранённый фильтр, а «Исключить» для отрезков на
   бэке не применялось — пользователь молча получал обратное тому, что просил.
   Теперь исключение периода поддержано, поэтому управление должно быть видимым.
   Скрывать его снова нельзя: скрытый, но активный режим — та самая ловушка. */
.ui-dialog.us-modal-jq .us-mode-ranges .selector-chosen select.filtered,
.ui-dialog.us-modal-jq .us-mode-ranges .pqf-sel-search,
.ui-dialog.us-modal-jq .us-mode-ranges .selector-chosen .pqf-list-footer { display: none; }
/* Лупа поиска по выбранным в режиме диапазонов не нужна — прячем только её,
   оставляя сам ряд с чипами «Включить/Исключить». */
.ui-dialog.us-modal-jq .us-mode-ranges .pqf-cond-row .pqf-sel-search-toggle { display: none; }
/* Левый список гаснет + запрет ввода + пометка. */
.ui-dialog.us-modal-jq .us-mode-ranges .selector-available { position: relative; }
.ui-dialog.us-modal-jq .us-mode-ranges .selector-available select.filtered,
.ui-dialog.us-modal-jq .us-mode-ranges .selector-available .selector-filter,
.ui-dialog.us-modal-jq .us-mode-ranges .selector-available .pqf-list-footer { opacity: .4; pointer-events: none; }
.ui-dialog.us-modal-jq .us-mode-ranges .selector-available::after {
    content: "недоступно в режиме диапазонов"; position: absolute; left: 0; right: 0; top: 84px;
    text-align: center; font-size: 11.5px; color: var(--pq-surface-500);
}
.ui-dialog.us-modal-jq .us-mode-ranges .selector-chooser { visibility: hidden; }

/* Строка над «Выбранными»: чипы слева, лупа справа (PLQM-1789 #2). */
.ui-dialog.us-modal-jq .pqf-cond-row {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.ui-dialog.us-modal-jq .pqf-sel-search-toggle {
    width: 26px; height: 26px; flex: 0 0 auto; border: 1px solid var(--pq-surface-300); border-radius: 7px;
    background: var(--pq-surface-0); color: var(--pq-surface-500); display: inline-flex;
    align-items: center; justify-content: center; cursor: pointer; font-size: 12px;
}
.ui-dialog.us-modal-jq .pqf-sel-search-toggle:hover { color: var(--pq-primary); border-color: var(--pq-primary-200); }
.ui-dialog.us-modal-jq .pqf-sel-search-toggle.is-active {
    color: var(--pq-primary); border-color: var(--pq-primary); background: var(--pq-primary-50);
}
/* Развёрнутое поле поиска по выбранным (съедает высоту правого списка — низы
 * списков выравнивает _sizeLists, а не сдвиг вниз). */
.ui-dialog.us-modal-jq .pqf-sel-search {
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 5px 9px;
    border: 1px solid var(--pq-primary-200); border-radius: 7px; box-shadow: 0 0 0 2px var(--pq-primary-50);
}
.ui-dialog.us-modal-jq .pqf-sel-search[hidden] { display: none; }
.ui-dialog.us-modal-jq .pqf-sel-search .fa-search { color: var(--pq-surface-400); font-size: 11px; }
.ui-dialog.us-modal-jq .pqf-sel-search-input {
    flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
    font-size: 12px; color: var(--pq-surface-800);
}
.ui-dialog.us-modal-jq .pqf-sel-search-clear {
    flex: 0 0 auto; border: 0; background: none; color: var(--pq-surface-400); cursor: pointer; font-size: 11px;
}
.ui-dialog.us-modal-jq .pqf-sel-search-clear:hover { color: var(--pq-surface-700); }

/* ── PLQM-1789: календарный ввод даты в ячейке От/До ── */
.ui-dialog.us-modal-jq .us-filter-range-cell.pqf-has-cal { position: relative; }
.ui-dialog.us-modal-jq .us-filter-range-cell.pqf-has-cal .us-filter-range-from,
.ui-dialog.us-modal-jq .us-filter-range-cell.pqf-has-cal .us-filter-range-to { padding-right: 30px; }
.ui-dialog.us-modal-jq .pqf-range-cal {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; padding: 0; border: 0; background: transparent;
    color: var(--pq-surface-400); cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; font-size: 13px; box-shadow: none;
}
.ui-dialog.us-modal-jq .pqf-range-cal:hover,
.ui-dialog.us-modal-jq .pqf-range-cal.is-active { color: var(--pq-primary); }
/* Поповер datepicker вынесен в <body> (escape overflow диалога), position:fixed,
 * z-index над диалогом фильтра (10510) — как у автокомплита. */
.pqf-range-cal-pop {
    position: fixed; z-index: 10600; background: var(--pq-surface-0, #fff);
    border: 1px solid var(--pq-surface-300, #d1d5db); border-radius: 8px;
    box-shadow: var(--pq-shadow-lg, 0 12px 32px rgba(15, 23, 42, .18)); padding: 4px;
}
/* DS-скин календаря (jQuery UI datepicker вне DS — перекрываем us.jqueryui.css). */
.pqf-range-cal-pop .ui-datepicker {
    display: block; width: auto; padding: 2px; margin: 0; border: 0; background: transparent;
    font-family: var(--pq-font-base); font-size: 12.5px; color: var(--pq-surface-800);
}
.pqf-range-cal-pop .ui-datepicker-inline { width: auto; }
/* шапка: без тёмной плашки/рамки */
.pqf-range-cal-pop .ui-datepicker-header {
    background: transparent !important; border: 0 !important; padding: 2px 0 6px; position: relative;
}
.pqf-range-cal-pop .ui-datepicker-title { font-size: 13px; font-weight: 600; color: var(--pq-surface-800); line-height: 26px; }
/* стрелки: плоские, DS-hover, глиф вместо спрайта */
.pqf-range-cal-pop .ui-datepicker-prev,
.pqf-range-cal-pop .ui-datepicker-next {
    width: 26px; height: 26px; top: 2px; cursor: pointer; border: 0 !important;
    background: transparent !important; border-radius: 6px; overflow: hidden;
}
.pqf-range-cal-pop .ui-datepicker-prev { left: 2px; }
.pqf-range-cal-pop .ui-datepicker-next { right: 2px; }
.pqf-range-cal-pop .ui-datepicker-prev:hover,
.pqf-range-cal-pop .ui-datepicker-next:hover { background: var(--pq-surface-100) !important; }
.pqf-range-cal-pop .ui-datepicker-prev .ui-icon,
.pqf-range-cal-pop .ui-datepicker-next .ui-icon {
    background: none !important; text-indent: 0; overflow: visible; width: 26px; height: 26px;
    margin: 0; top: 0; left: 0; color: var(--pq-surface-500); font-size: 0;
}
.pqf-range-cal-pop .ui-datepicker-prev .ui-icon::before,
.pqf-range-cal-pop .ui-datepicker-next .ui-icon::before {
    font-size: 16px; line-height: 26px; display: block; text-align: center; color: var(--pq-surface-600);
}
.pqf-range-cal-pop .ui-datepicker-prev .ui-icon::before { content: '\2039'; }  /* ‹ */
.pqf-range-cal-pop .ui-datepicker-next .ui-icon::before { content: '\203A'; }  /* › */
/* дни недели */
.pqf-range-cal-pop .ui-datepicker-calendar { border-collapse: collapse; margin: 0; }
.pqf-range-cal-pop .ui-datepicker-calendar th {
    padding: 4px 0; font-size: 10.5px; font-weight: 700; color: var(--pq-surface-400);
    text-transform: uppercase; border: 0; background: transparent;
}
.pqf-range-cal-pop .ui-datepicker-calendar td { padding: 1px; border: 0; }
/* ячейки-дни: плоские, без grey-спрайта; hover primary-50; сегодня — рамка; выбранный — primary */
.pqf-range-cal-pop .ui-datepicker-calendar td a,
.pqf-range-cal-pop .ui-datepicker-calendar td span {
    display: block; width: 30px; padding: 6px 0; text-align: center; text-decoration: none;
    border: 0 !important; border-radius: 6px; background: transparent !important;
    color: var(--pq-surface-700) !important; font-weight: 500;
}
.pqf-range-cal-pop .ui-datepicker-calendar td span { color: var(--pq-surface-300) !important; }
.pqf-range-cal-pop .ui-datepicker-calendar td a:hover {
    background: var(--pq-primary-50) !important; color: var(--pq-primary-700) !important;
}
.pqf-range-cal-pop .ui-datepicker-calendar td.ui-datepicker-today a {
    box-shadow: inset 0 0 0 1px var(--pq-primary-200); color: var(--pq-primary-700) !important;
}
/* выходные — приглушены, НО не когда день выбран (иначе серый текст на синем
 * не читался — замечание руководителя). Выбранный день всегда белым по primary. */
.pqf-range-cal-pop .ui-datepicker-calendar td.ui-datepicker-week-end a:not(.ui-state-active) { color: var(--pq-surface-500) !important; }
.pqf-range-cal-pop .ui-datepicker-calendar td a.ui-state-active,
.pqf-range-cal-pop .ui-datepicker-calendar td.ui-datepicker-week-end a.ui-state-active,
.pqf-range-cal-pop .ui-datepicker-calendar td a.ui-state-active:hover {
    background: var(--pq-primary) !important; color: #fff !important; font-weight: 700; box-shadow: none;
}

/* ── PLQM-1789: спиннер догрузки при «Выбрать всё» на больших измерениях ──
 * «Выбрать всё» одним запросом тянет все элементы; на время — полупрозрачный
 * оверлей + крутилка поверх списка «Доступные опции». */
.ui-dialog.us-modal-jq .selector-available.pqf-selectall-loading { position: relative; }
.ui-dialog.us-modal-jq .selector-available.pqf-selectall-loading::after {
    content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(255, 255, 255, .7);
    border-radius: var(--pq-radius-md);
}
.ui-dialog.us-modal-jq .selector-available.pqf-selectall-loading::before {
    content: ""; position: absolute; z-index: 6; top: calc(50% - 11px); left: calc(50% - 11px);
    width: 22px; height: 22px; border: 2.5px solid var(--pq-primary-200);
    border-top-color: var(--pq-primary); border-radius: 50%;
    animation: pqf-spin .7s linear infinite;
}
@keyframes pqf-spin { to { transform: rotate(360deg); } }