/*!
 * SmitMobileFilters — стили единого мобильного компонента фильтров.
 * Классы sheet/trigger/count (.smit-mobile-filter-*, .smit-filter-count) заданы
 * в theme-smit.css и переиспользуются; здесь — раскладка строки, slot, FAB и
 * фикс скролла всплывающих календарей/меню внутри sheet.
 */

/* ── мобильная строка [поиск][Фильтры] в одну линию ── */
/* build 1659: align-items:stretch → кнопка «Фильтры» той же высоты, что поле поиска */
.smf-bar { display: flex; align-items: stretch; gap: 8px; margin-bottom: 8px; flex-wrap: nowrap; }
.smf-search { flex: 1 1 auto; min-width: 0; }
.smf-search .form-control, .smf-search .input-group { height: 100%; }
/* Поле поиска и кнопка «Фильтры» — одной высоты. input-group-sm давал полю
   31px против 38px у кнопки, строка выглядела разъехавшейся. */
.smf-bar { --smf-h: 38px; }
.smf-bar .smf-search, .smf-bar .smf-search .input-group,
.smf-bar .smf-search .form-control, .smf-bar .smf-search .input-group-text,
.smf-bar .smit-mobile-filter-trigger {
    height: var(--smf-h); min-height: var(--smf-h);
}
.smf-bar .smit-mobile-filter-trigger { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; }

/* ── ряд первичных элементов над строкой поиска (слот primary) ──
   Выбор области списка слева, первичное действие справа: то, за чем идут в
   раздел, остаётся на виду, остальные фильтры — в шторке. */
/* контейнер, в который компонент вставил свои строки */
.smf-host { flex-wrap: wrap; }

/* Строки компонента всегда занимают линию целиком: тулбар нередко лежит в
   контейнере с display:flex (card-header у темы), и без этого ряд первичных
   кнопок и строка поиска вставали рядом, сжимая друг друга. */
.smf-primary, .smf-bar { flex: 1 1 100%; width: 100%; }
.smf-primary { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.smf-primary > * { margin: 0 !important; min-width: 0; }
.smf-primary > .dropdown { flex: 1 1 auto; }
.smf-primary > .dropdown > .dropdown-toggle { width: 100%; max-width: none !important; }
/* последний элемент ряда — действие: прижимаем к правому краю */
.smf-primary > *:last-child { flex: 0 0 auto; margin-left: auto !important; }
/* элементы слота extras (кнопка обновления) — той же высоты, что поиск */
.smf-bar > .btn { flex: 0 0 auto; height: var(--smf-h); min-height: var(--smf-h); }

/* ── sheet: фиксированная высота 70vh, тело скроллится, кнопки внизу ── */
/* build 1629: на некоторых страницах (Поддержка) offcanvas-backdrop получает
   z-index 1190 из внешнего CSS (> Bootstrap offcanvas 1045) → backdrop оказывался
   ПОВЕРХ листа и затемнял сами фильтры серым. Держим лист гарантированно выше. */
/* build 1731: правило требовало ОБА класса, а часть панелей (фильтры папки
   абонентов) размечена только как .smit-mobile-filter-sheet — она оставалась
   на дефолтном слое offcanvas (1045) и уходила под затемнение. Достаточно
   любого из классов. */
.offcanvas.smf-sheet,
.offcanvas.smit-mobile-filter-sheet { z-index: 1200 !important; }
/* подложка — сразу под листом, чтобы не перекрывала его саму */
.offcanvas.smf-sheet ~ .offcanvas-backdrop,
.offcanvas.smit-mobile-filter-sheet ~ .offcanvas-backdrop { z-index: 1199 !important; }
/* Высота — по содержимому, но не выше 70vh: у раздела с парой фильтров
   шторка на 70vh оказывалась почти пустой. */
.smf-sheet.smit-mobile-filter-sheet,
.offcanvas.smit-mobile-filter-sheet { height: auto !important; max-height: 70vh !important; }
.smf-sheet .offcanvas-body { overflow-y: auto; display: flex; flex-direction: column; overscroll-behavior: contain; }
.smf-sheet .smf-slot { flex: 0 0 auto; }
.smf-sheet .smf-actions { margin-top: auto; }

/* Пока открыт наш sheet — блокируем прокрутку основной страницы. overflow:hidden
   на html+body + overscroll-behavior:contain на теле sheet (и на календаре) не
   дают скроллу «протекать» на страницу. touch-action не трогаем — иначе сломался
   бы внутренний скролл sheet/календаря.
   Таргет по .smit-mobile-filter-sheet (общий класс обоих компонентов —
   SmitMobileFilters добавляет и .smf-sheet, а SmitMobileFilterSheet/mirror-режим,
   напр. Финансовые операции, размечен только .smit-mobile-filter-sheet). */
html:has(.smit-mobile-filter-sheet.show),
body:has(.smit-mobile-filter-sheet.show) { overflow: hidden !important; }
body:has(.smit-mobile-filter-sheet.show) .offcanvas-body { overscroll-behavior: contain; }
body:has(.smit-mobile-filter-sheet.show) .sdr-popover.is-open { overscroll-behavior: contain; }

/* ── раскладка фильтров внутри sheet ── */
.smf-slot { gap: 12px; }
.smf-slot--stack { display: flex; flex-direction: column; }
.smf-slot--stack > * { width: 100% !important; max-width: none !important; margin: 0 !important; }
.smf-slot--grid-2 { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.smf-slot--grid-2 > * { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; }
/* элемент с классом smf-full — во всю ширину сетки (напр. селектор воронки) */
.smf-slot--grid-2 > .smf-full { grid-column: 1 / -1; }

/* единая аккуратная высота 40px для типовых контролов внутри sheet */
.smf-slot .form-select,
.smf-slot .form-control,
.smf-slot .dropdown-toggle,
.smf-slot .psel-trigger,
.smf-slot .sdr-trigger,
.smf-slot .swb {
  min-height: 40px; height: 40px; font-size: .9rem;
}
.smf-slot .sdr-trigger,
.smf-slot .dropdown,
.smf-slot .dropdown > .dropdown-toggle,
.smf-slot .psel, .smf-slot .psel-trigger { width: 100% !important; }
.smf-slot .dropdown > .dropdown-toggle { justify-content: space-between; }
/* ProfileSelect: одна строка, обрезка многоточием */
.smf-slot .psel-trigger { justify-content: flex-start; overflow: hidden; }
.smf-slot .psel-trig { min-width: 0; overflow: hidden; }
.smf-slot .psel-trig-name, .smf-slot .psel-trig-empty { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smf-slot .input-group { width: 100% !important; max-width: none !important; }

.smf-actions { display: flex; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e5e7eb; }

/* заголовки секций (mode:'mirror', как в Аудите) */
.smf-slot .smit-sheet-section { margin-bottom: 14px; }
.smf-slot .smit-sheet-section h6 { font-size: .82rem; color: #64748b; margin-bottom: 6px; }

/* ── FAB (плавающая кнопка действия) ── */
.smf-fab {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 1035;
  width: 56px; height: 56px; border-radius: 50%; border: none; background: #43b77a; color: #fff;
  box-shadow: 0 6px 18px rgba(45,154,95,.45); font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, box-shadow .15s;
}
.smf-fab:hover, .smf-fab:focus-visible { background: #2d9a5f; transform: scale(1.06); outline: none; }
.smf-fab:focus-visible { box-shadow: 0 0 0 3px rgba(67,183,122,.4), 0 6px 18px rgba(45,154,95,.45); }

/* ── фикс: всплывающий календарь SmitDateRange висит в body (absolute) и уходил
   за нижний край экрана; пока открыт любой наш sheet — показываем его как
   фиксированную панель снизу со своим скроллом. :has поддержан в моб.браузерах. ── */
@media (max-width: 767.98px) {
  body:has(.smf-sheet.show) .sdr-popover.is-open {
    position: fixed !important; left: 8px !important; right: 8px !important; bottom: 8px !important; top: auto !important;
    width: auto !important; max-width: none !important; max-height: 78vh !important; overflow-y: auto !important;
    /* Панель фильтров = 1200, её backdrop = 1199. Календарь открывается ИЗ неё,
       поэтому должен лежать ВЫШЕ (иначе уходит под подложку и выглядит серым). */
    z-index: 1250 !important; border-radius: 14px 14px 10px 10px !important;
    box-shadow: 0 -8px 30px rgba(0,0,0,.28) !important; -webkit-overflow-scrolling: touch;
  }
  body:has(.smf-sheet.show) .sdr-popover.is-open::before {
    content: ""; position: fixed; inset: 0; left: -8px; right: -8px; top: -100vh; bottom: -8px;
    background: rgba(0,0,0,.25); z-index: -1;
  }
}

/* ── тёмная тема ── */
[data-bs-theme="dark"] .smf-actions,
body.dark-theme .smf-actions { border-top-color: #2a2f37; }
[data-bs-theme="dark"] body:has(.smf-sheet.show) .sdr-popover.is-open,
body.dark-theme body:has(.smf-sheet.show) .sdr-popover.is-open { background: #1e2228; color: #e7eaf0; }

/* Десктоп-тулбар, спрятанный компонентом на мобильном. Свой класс нужен, потому
   что у тулбара страницы обычно стоит d-flex — бутстраповские утилиты идут с
   !important, и d-flex перебивал d-none, тулбар оставался на экране. */
.smf-desktop-toolbar { display: flex; flex-wrap: wrap; }
@media (max-width: 767.98px) { .smf-desktop-toolbar { display: none !important; } }


/* ═══════════════════════════════════════════════════════════════════════
   inline (build 2053): фильтров мало — прятать их в шторку значит добавить
   лишний шаг. Тулбар остаётся над таблицей: поиск на всю ширину, кнопки —
   прокручиваемым рядом.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .us-toolbar.smf-inline,
  .smf-inline {
    display: flex !important;
    /* На разметке обычно висит utility-класс .flex-wrap с !important — без
       такого же !important ряд ломался, и кнопки уезжали под поиск. */
    flex-wrap: nowrap !important;
    gap: 6px;
    align-items: center;
  }
  /* Поиск первым в ряду и тянется по остатку места: отдельная строка под него
     съедала экран, когда кнопок всего две. Если кнопок много и ряд не влезает,
     flex-wrap перенесёт их сам. */
  .smf-inline .input-group {
    order: -1;
    flex: 1 1 110px;
    min-width: 90px;
    max-width: 100%;
  }
  .smf-inline > .btn,
  .smf-inline > .dropdown > .btn,
  .smf-inline > .dropdown {
    flex: 0 0 auto;
  }
  .smf-inline > .btn,
  .smf-inline .dropdown-toggle {
    padding: .3rem .6rem;
    font-size: .82rem;
  }
  /* Счётчик найденного не должен разрывать ряд кнопок */
  .smf-inline .us-count { order: 99; flex: 1 0 100%; text-align: right; }
}