/* Общий фильтр отчётов CRM (plans/reports-owner, ФЛ-0; Р-502): строка полей
   (.report-filters), список с галочками на <details> (.multi-select),
   быстрые периоды (.report-presets) и строка «Показано» (.report-applied).
   Первый экран — «Расходы по статьям и проектам»; остальные переводятся на
   эти классы по ФЛ-1…ФЛ-3, старые (.finance-filters__field и др.) уходят по
   мере перевода. Без инлайн-стилей (CSP). */

.report-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.report-filters__month {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 200px;
  min-width: 0;
}

/* Строка полей и быстрые периоды одним блоком над экраном (ФЛ-2) */
.report-filters-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Даты реестра «с — по» и срез «на дату» (ФЛ-2): поле даты с подписью слева */
.report-filters__date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 190px;
  min-width: 0;
}

/* «с» и «по» одной ширины: на телефоне поля периода встают ровно друг под другом */
.report-filters__label {
  min-width: 20px;
  color: var(--text-secondary);
  font-size: var(--font-size-secondary);
}

.report-filters__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Выгрузка экрана (ФЛ-7): «Выгрузить Excel CSV» в ряд */
.report-export {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.report-export__label {
  color: var(--text-secondary);
  font-size: var(--font-size-secondary);
}

/* Пояснение среза на прошлую дату под фильтром (ФЛ-2) */
.report-filters__note {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
}

/* Заголовок колонки с сортировкой (ФЛ-3): активная — цветом и стрелкой */
.report-sort {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.report-sort:hover {
  color: var(--accent);
  text-decoration: none;
}

.report-sort--active {
  color: var(--accent);
  font-weight: 600;
}

.report-sort--asc::after {
  content: " ↑";
}

.report-sort--desc::after {
  content: " ↓";
}

/* --- Список с галочками: свёрнутый — как поле выбора, раскрытый — панель
 *     поверх страницы. [hidden] у пунктов перекрывает display: flex --- */
.multi-select {
  position: relative;
  flex: 0 1 240px;
  min-width: 0;
}

.multi-select__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.multi-select__summary::-webkit-details-marker {
  display: none;
}

/* Галочка-стрелка поля выбора */
.multi-select__summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: translateY(-2px) rotate(45deg);
}

.multi-select[open] .multi-select__summary::after {
  transform: translateY(2px) rotate(225deg);
}

.multi-select__summary:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.multi-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-select__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: max(100%, 300px);
  max-width: calc(100vw - 32px);
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-panel);
  box-shadow: var(--ios-shadow-popover);
}

.multi-select__actions {
  display: flex;
  gap: var(--space-2);
}

.multi-select__actions[hidden],
.multi-select__search[hidden] {
  display: none;
}

.multi-select__list {
  max-height: 320px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: 0;
}

.multi-select__group[hidden],
.multi-select__option[hidden],
.multi-select__empty[hidden] {
  display: none;
}

.multi-select__heading {
  margin: var(--space-2) var(--space-2) var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
}

.multi-select__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
}

.multi-select__option:hover {
  background: var(--nav-hover-bg);
}

.multi-select__check {
  flex: none;
  margin: 3px 0 0;
}

.multi-select__empty {
  margin: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--font-size-secondary);
}

/* --- Быстрые периоды: сегменты ссылками, выбранный — подложкой --- */
.report-presets {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 2px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius);
  background: var(--surface);
}

.report-presets__item {
  padding: var(--space-1) var(--space-3);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: var(--font-size-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.report-presets__item:hover {
  color: var(--text);
  text-decoration: none;
}

.report-presets__item--active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
}

/* --- «Показано: …» и значения из ссылки, которых человек не видит --- */
.report-applied {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
}

.report-applied p {
  margin: 0;
}

.report-applied__text {
  color: var(--text-secondary);
}

.report-applied__label {
  color: var(--text);
  font-weight: 600;
}

.report-applied__reset {
  margin-left: var(--space-2);
}

.report-applied__dropped {
  color: var(--warning);
}

@media (max-width: 767px) {
  .report-filters__month,
  .report-filters__date,
  .multi-select {
    flex: 1 1 100%;
  }

  .report-filters__month .field__input,
  .report-filters__date .field__input {
    flex: 1 1 auto;
  }

  .multi-select__panel {
    width: 100%;
  }
}

/* Реестр «Расходы»: быстрые периоды и строка «Показано» под строкой фильтров */
.registry-bar .report-presets,
.registry-bar .report-applied {
  margin-top: var(--space-3);
}

/* Список во всю ширину поля с подписью сверху (реестр счетов) */
.multi-select--block {
  display: block;
  flex: none;
  width: 100%;
}

/* Выбор из списка с подписью слева — порог «ниже медианы» «Ставок за м²» (ОТ-3) */
.report-filters__choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 300px;
  min-width: 0;
}

/* Подпись не сжимается: иначе «ниже медианы» обрезалась под списком до
 * «ниже медиа» — сжимается сам список */
.report-filters__choice .report-filters__label {
  flex: none;
  white-space: nowrap;
}