/* Стили страницы управления трафиком, которые нельзя держать в изолированном
   TrafficManagementPage.razor.css.

   Карточка меню «трёх точек» рендерится оверлеем AntDesign в конце body — она
   уходит из поддерева страницы, и страничный ::deep (он компилируется в
   [b-<хеш>] .selector) до неё не достаёт. Без глобального класса пункт
   остаётся 210x32 при требуемых 244x40.

   Поэтому область действия задаётся не положением в DOM, а классом-маркером:
   страница передаёт DotsMenuContentLabelClass="tm-dots-menu__item", генератор
   колонок пробрасывает его в DotsMenu.ContentLabelClass, и класс уезжает
   вместе с пунктом куда бы его ни перенёс оверлей. Остальные ~20 экранов
   с этим меню класс не передают и правило не получают. */

/* PageMenu — flex-раскладка: на узком экране таблица задаёт ширину по содержимому,
   из-за чего .main_content (flex item с min-width:auto) расширяет весь документ.
   Разрешаем сжать только основную колонку этого экрана; горизонтальную
   прокрутку таблицы обрабатывает страничная .tm-page__table-scroll. */
body:has(.tm-page__tabs, .tm-group__panel) .main_content {
    min-width: 0;
}

body:has(.tm-page__tabs, .tm-group__panel) .main_page_container,
body:has(.tm-page__tabs, .tm-group__panel) .right_content {
    min-width: 0;
}

body:has(.tm-page__tabs, .tm-group__panel) .header_content {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body:has(.tm-page__tabs, .tm-group__panel) .breadCrumbs {
    min-width: 0;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 820px) {
    body:has(.tm-page__tabs, .tm-group__panel) .header_content {
        height: auto;
        min-height: 60px;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    body:has(.tm-page__tabs) .tm-page__tabs .custom_tabs .ant-tabs-nav-wrap {
        overflow-x: auto;
    }
}

@media (max-width: 1100px) {
    body:has(.tm-page__tabs, .tm-group__panel) .header-user-menu .tooltiptext {
        left: auto;
        right: 0;
        margin-left: 0;
        max-width: calc(100vw - 16px);
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
    /* Освобождаем место для рабочей ширины списка, сохраняя все поля фильтра.
       Действия складываются в две колонки и остаются целиком доступны. */
    body:has(.tm-page__tabs) .left_content_container {
        width: 300px !important;
        flex: 0 0 300px;
    }

    body:has(.tm-page__tabs) .right_content {
        width: calc(100% - 300px) !important;
        min-width: 0;
    }

    .tm-page__filters .group_container + div {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px !important;
        padding: 12px !important;
    }

    .tm-page__filters .flat__button,
    .tm-page__filters .button_main.action__button {
        width: 100% !important;
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Сохраняем обе группы навигации в одной строке: основная навигация
       получает прокрутку, а действия пользователя остаются закреплены справа. */
    body:has(.tm-page__tabs, .tm-group__panel) header.ant-layout-header .main_header_menu {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100vw - 320px);
        overflow-x: auto;
    }

    body:has(.tm-page__tabs, .tm-group__panel) header.ant-layout-header .icon_header_menu {
        flex: 0 0 320px;
        width: 320px;
        min-width: 0;
        margin-left: 8px;
        overflow-x: auto;
    }

    body:has(.tm-page__tabs, .tm-group__panel) header.ant-layout-header .icon_header_menu ul {
        width: 100%;
        overflow-x: auto;
        gap: 10px;
    }

}

/* Замеры: карточка 260x136 при трёх пунктах, полоса
   подсветки пункта 40, отступ карточки 8 сверху и снизу. Живая карточка была
   226x112: ширина = min-width 210 от .select_label_item_img плюс padding 8+8
   самого пункта (боковых отступов у поповера нет), высота = 3 x 32 от
   .select_label_item плюс те же 8+8. 244 = 260 - 8 - 8.

   justify-content: пункт — это <button> с display:flex и min-width, шире
   своего содержимого; UA-стиль кнопки ставит justify-content:center, и
   text-align:left на flex-контейнер не влияет. Без flex-start пункты разной
   длины встают каждый по своему центру и колонка иконок разъезжается. */
.dots-menu__item.tm-dots-menu__item {
    justify-content: flex-start;
    min-width: 244px;
    min-height: 40px;
}

/* Видимая карточка каждого dropdown слота имеет ширину 294px
   внутри поля 310px. Overlay рендерится в конце body, поэтому scoped CSS страницы
   до него не доходит; класс-маркер передаётся через Popover.OverlayPopoverClass. */
.tm-group__slot-popover {
    width: 294px !important;
}

/* Tooltip «Глобальная» 243×67, #484A60. AntDesign
   рендерит его в body, поэтому marker-класс и правило должны быть глобальными. */
body:has(.tm-group__panel) .ant-tooltip-placement-bottomLeft {
    transform: translate(-14px, -5px) !important;
    /* AntDesign fade оставляет в кадре промежуточную прозрачность: #484A60
       смешивался с белым до #4F5166. В статике фон
       непрозрачный, поэтому только этот tooltip рендерится с opacity 1. */
    opacity: 1 !important;
}
body:has(.tm-group__panel) .ant-tooltip-placement-bottomLeft .ant-tooltip-inner {
    width: 243px !important;
    min-width: 243px !important;
    max-width: 243px !important;
    height: 67px;
    box-sizing: border-box;
    background: #484A60 !important;
    padding: 9px 10px 7px !important;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0;
}

/* Список кампаний занимает 670px правой колонки
   QueryBuilder, а не стандартные 294px popover. Сам overlay портируется
   в body, поэтому правило остаётся здесь и ограничивается страницей группы. */
body:has(.tm-group__card--control) .ant-popover:has(.popover_items):not(.query_builder_view_container),
body:has(.tm-group__card--control) .ant-popover:has(.popover_items):not(.query_builder_view_container) .ant-popover-inner-content {
    width: 670px !important;
    box-sizing: border-box;
}
body:has(.tm-group__card--control) .ant-popover:has(.popover_items):not(.query_builder_view_container) {
    transform: translateY(-4px) !important;
}
body:has(.tm-group__card--control) .ant-popover:has(.popover_items):not(.query_builder_view_container) .search_container {
    height: 40px;
    background: #F0F3F8;
}
body:has(.tm-group__card--control) .ant-popover:has(.popover_items):not(.query_builder_view_container) .search_field,
body:has(.tm-group__card--control) .ant-popover:has(.popover_items):not(.query_builder_view_container) .search_field::placeholder,
body:has(.tm-group__card--control) .ant-popover:has(.popover_items):not(.query_builder_view_container) .select_label_item {
    font-size: 14px;
    line-height: 17px;
}
body:has(.tm-group__card--control) .ant-popover:has(.popover_items):not(.query_builder_view_container) .popover_items {
    max-height: 240px;
}
body:has(.tm-group__card--control) .ant-popover:has(.popover_items):not(.query_builder_view_container) .select_label_item.popover_selected {
    background: transparent;
}