/* ============================================================
   HEADER / NAV — верхнее меню сайта: бренд upravka.ru, бургер на
   мобильных, "снежинка"-иконка у логотипа, подсветка активного пункта.
   Грузится на ВСЕХ страницах.

   Архитектура (переписана 2026-07-14): раньше шапка была 3-колоночной
   Pure-грид (pure-u-lg-1-5 / pure-u-lg-1-2), а "мобильность" пунктов
   меню включалась/выключалась JS-ом через класс pure-menu-horizontal —
   то есть ДВЕ независимые системы (брейкпоинты Pure-грида и наши
   media-запросы) должны были совпадать по ширине, и именно на этом
   стыке рвалось на планшетах (появлялась половина шапки без бургера).

   Теперь всё решает ОДИН media-запрос ниже: у #menu нет Pure-грид
   классов вообще, это просто flex-контейнер с двумя блоками —
   .custom-menu-links (пункты меню) и .custom-menu-account (логин/
   аккаунт). На мобильных оба скрыты через display:none и появляются
   только по классу .open (его ставит JS по клику на бургер). На
   десктопе тот же CSS просто показывает всё и раскладывает в строку —
   JS там вообще не участвует. Сами пункты (<li class="pure-menu-item">,
   <a class="pure-menu-link">) остаются на классах Pure — так их
   стили (padding, hover) продолжают работать без переписывания, и
   dashboard.css → .account-item .pure-menu-link (лампа статуса)
   не ломается.
   ============================================================ */

.custom-wrapper {
    background-color: #557a95;
    -webkit-font-smoothing: antialiased;
}

.custom-wrapper-search {
    background-color: #557a95;
    -webkit-font-smoothing: antialiased;
}

/* Внутренние страницы dashboard (см. '{% if '/dashboard/' in request.path %}'
   в base.html) — шапка не на всю ширину, а плавающая панель с отступами
   2em слева/справа и 1em сверху, с радиусом скругления как у карточек
   заявки (.5em, см. app-card.css). .custom-wrapper и .custom-wrapper-search —
   два визуально смежных блока (меню сверху, поиск снизу), поэтому радиус
   разбит: верхние углы у .custom-wrapper, нижние — у .custom-wrapper-search,
   а зазор между ними по вертикали — 0, чтобы вместе они читались как
   единая скруглённая панель, а не два отдельных прямоугольника.

   На Ленте/Мозаике (has-status-filter) добавляется 3-я строка —
   .custom-wrapper-filters (радиокнопки статуса, components/status-filter.css) —
   тогда нижнее скругление уезжает на неё, а строка поиска между
   меню и фильтрами становится плоской снизу (0), чтобы панель
   оставалась одним цельным скруглённым блоком без "разрывов". */
.is-internal-header .custom-wrapper {
    margin: 1em 2em 0;
    border-radius: .5em .5em 0 0;
    border: none;
}

.is-internal-header .custom-wrapper-search {
    margin: 0 2em 0;
    border-radius: 0 0 .5em .5em;
    border: none;
}

.is-internal-header.has-status-filter .custom-wrapper-search {
    border-radius: 0;
}

/* Отступ снизу от инпута поиска до низа панели — крупнее (1em), когда под
   поиском больше ничего нет (панель сразу закругляется). На Ленте/Мозаике
   (has-status-filter) под поиском ещё строка фильтров — там отступ
   остаётся прежним (.5em), трогать не нужно. */
.custom-wrapper-search__form {
    padding-bottom: 1em;
}
.is-internal-header.has-status-filter .custom-wrapper-search__form {
    padding-bottom: .5em;
}

/* Фильтры — снова последняя строка панели (переключатель вида теперь
   внутри этой же строки, слева от фильтра статуса, а не отдельной
   строкой ниже), поэтому нижнее скругление опять здесь. */
.is-internal-header .custom-wrapper-filters {
    display: flex;
    align-items: center;
    gap: 2em;
    flex-wrap: wrap;
    margin: 0 2em 0;
    padding: 0 1em .5em;
    border-radius: 0 0 .5em .5em;
    background-color: #557a95;
    -webkit-font-smoothing: antialiased;
}

/* На узких экранах (< 900px) в строке фильтров оставляем только фильтр
   статусов — переключатель вида Список/Мозаика и «Диапазон дат» прячем,
   чтобы строка не переносилась в три этажа. Скрытые date_from/date_to
   остаются в DOM (display:none не отключает инпуты), поэтому уже
   выбранный диапазон продолжает уходить вместе с формой статуса. */
@media (max-width: 56.1875em) {
    .custom-wrapper-filters .view-toggle,
    .custom-wrapper-filters .drp-wrap,
    .custom-wrapper-filters .mcf-wrap {
        display: none;
    }
}

/* Поле поиска в шапке — композер чипов (base.html): сама пилюля — .search-
   field-wrap (flex-строка), внутри — подтверждённые (Enter/лупа) фразы как
   чипы .search-chip (переиспользует msp-chip/msp-chip-x, components/multi-
   select-pill.css — тот же серый чип с крестиком, что у "Адреса" на
   add_contractor.html), в конце — один живой .search-live для следующей
   фразы. align-items:center на строке — то, что ставит текст, чипы и
   крестики на одну ось: расстояние от верха/низа пилюли до любого из них
   одинаковое само по себе, без ручной подгонки под конкретное слово (как
   раньше приходилось для крестика внутри цельного <input>). min-height —
   чтобы пилюля не "прыгала" по высоте между пустым полем и полем с чипами. */
.search-field-wrap{
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35em;
    width: 100%;
    box-sizing: border-box;
    min-height: 2.2em;
    background-color: #ffffff;
    /* 1.2em, не 999px — тот же приём и по той же причине, что у .msp-trigger
       (components/multi-select-pill.css): при переносе чипов на несколько
       строк на узком экране блок становится высоким, и "по высоте всей
       пилюли" радиус 999px раздувает углы в каплю/овал вместо аккуратного
       скругления. */
    border-radius: 1.2em;
    padding: .3em 1.1em;
}
.search-chip{ flex-shrink: 0; }
/* Специфичность важна: у Pure.css есть своё правило .pure-form
   input[type=search] весом (0,2,1) (vendor/pure.css:288 — border/box-shadow/
   border-radius/padding), обычный одиночный класс .search-live (0,1,0) им
   перебивается независимо от порядка подключения файлов. Тот же приём, что
   и у .pill-input (components/pill-input.css) — уравниваем вес через
   .pure-form input.search-live (тоже 0,2,1) и полагаемся на то, что
   header-nav.css подключён в base.html ПОСЛЕ pure.css, так что при равном
   весе побеждает наше правило. */
.search-live,
.pure-form input.search-live{
    flex: 1 1 6em;
    min-width: 6em;
    border: none; outline: none; background: transparent;
    box-shadow: none; border-radius: 0;
    padding: 0; margin: 0;
    font-size: 1em; font-family: inherit; color: #444444; line-height: 1;
}
.search-live::placeholder{ color: #9a9a9a; }
.search-live::-webkit-search-cancel-button,
.search-live::-webkit-search-decoration{
    -webkit-appearance: none;
    display: none;
}

.custom-brand {
    display: inline-flex;
    align-items: center;
    color: whitesmoke;
    /* .pure-menu-heading даёт padding: .5em 1em по умолчанию — обнуляем
       по горизонтали, иначе складывается с padding у .custom-brand-row
       и лого съезжает вправо относительно поля поиска ниже (1em). */
    padding-left: 0;
    padding-right: 0;
}

.custom-brand::after {
    content: ".ru";
    color: #79aec8;
}

/* Снежинка/иконка у логотипа upravka */
.custom-brand__icon {
    width: 1em;
    height: 1em;
    margin-right: .1em;
    vertical-align: top;

    /* Делает SVG белым (если исходник тёмный/чёрный) */
    filter: brightness(0) invert(1);
}

/* Строка с логотипом и бургером. flex + align-items:center — крестик
   всегда на одной горизонтальной оси с логотипом, сколько бы ни было
   отступов сверху/снизу — не нужно подбирать пиксели вручную.
   padding: 1em слева/справа — та же величина, что и padding-left/right
   у поля поиска ниже (см. base.html), чтобы лого и бургер были на одной
   вертикальной линии с краями поисковой строки. */
.custom-brand-row {
    display: flex;
    align-items: center;
    padding: .8em 1em;
}

/* Лого прижимаем влево (margin-right:auto забирает всё свободное
   место), лампу и бургер — вправо единой группой; фиксированный
   зазор 2em между ними задаём отдельно, а не через space-between
   (тот "плавает" в зависимости от ширины экрана). */
.custom-brand { margin-right: auto; }
#ping-lamp-slot:not(:empty) { margin-right: 2em; }

.custom-toggle {
    width: 34px;
    height: 34px;
    position: relative;
    flex-shrink: 0;
    margin-left: 1em;
    cursor: pointer;
}

.custom-toggle .bar {
    background-color: whitesmoke;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateY(-4px);
    transition: transform 0.3s;
}

.custom-toggle .bar:last-child {
    transform: translate(-50%, -50%) translateY(4px);
}

.custom-toggle.x .bar {
    transform: translate(-50%, -50%) rotate(45deg);
}

.custom-toggle.x .bar:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* radius:999px — тот же "пилюльный" язык, что и у поля поиска
   (components/pill-input.css): box у .pure-menu-item без своего
   padding (обнулён в pure.css) тесно облегает <a> внутри, поэтому
   большой радиус упирается в реальную высоту пункта и даёт ровную
   таблетку, а не квадратную заливку с обрезанными углами. */
.pure-menu-selected {
    background: rgba(255, 255, 255, 0.15);
    color: #fff !important;
    border-radius: 999px;
}

.pure-menu-selected:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Наведение/фокус на НЕвыбранный пункт — тот же приём поверх
   собственного правила Pure.css (.pure-menu-link:hover), которое даёт
   прямоугольную квадратную заливку без радиуса; здесь просто
   перебиваем специфичностью (доп. класс-предок) и добавляем radius. */
.custom-menu-links .pure-menu-link:hover,
.custom-menu-links .pure-menu-link:focus,
.custom-menu-account .pure-menu-link:hover,
.custom-menu-account .pure-menu-link:focus {
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

/* ===================== Мобильные (< 64em / 1024px) ===================== */
@media (max-width: 63.999em) {
    .custom-menu-links,
    .custom-menu-account {
        display: none;
    }

    /* Меню открыто — показываем оба блока. */
    .custom-wrapper.open .custom-menu-links,
    .custom-wrapper.open .custom-menu-account {
        display: block;
    }

    /* "Воздух": .5em над логотипом и под ним даёт padding у
       .custom-brand-row, плюс отступ снизу после последнего пункта и
       более просторные сами пункты (тап-таргеты). */
    .custom-wrapper.open {
        padding-bottom: .5em;
    }

    /* Тот же левый отступ (2em), что у логотипа в .custom-brand-row —
       чтобы вертикальная линия пунктов меню была на одной оси с ним. */
    .custom-wrapper.open .pure-menu-link {
        padding: .75em 3.1em;
    }
}

/* ===================== Десктоп (>= 64em / 1024px) ===================== */
@media (min-width: 64em) {
    .custom-wrapper {
        display: flex;
        align-items: center;
    }

    .custom-brand-row {
        flex: 0 0 auto;
    }

    .custom-toggle {
        display: none;
    }

    .custom-menu-links {
        flex: 1 1 auto;
    }

    /* padding-right — гарантированный отступ от правого края шапки,
       той же величины (2em), что и padding логотипа слева и padding
       между логотипом и первым пунктом меню (.custom-brand-row).
       Живёт на контейнере, а не на ссылке/лампе внутри — работает
       одинаково что для одной ссылки "Вход" на публичных страницах,
       что для "admin + лампа" на дашборде. */
    .custom-menu-account {
        flex: 0 0 auto;
        padding-right: 2em;
    }

    .custom-menu-links ul,
    .custom-menu-account ul {
        display: flex;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .custom-menu-account ul {
        justify-content: flex-end;
    }
}