/* Поведение табличных разделов на узких экранах и растяжка таблицы
   на всю высоту окна. Подключается глобально из header.php.

   Значок с числом активных фильтров и сам блок управления описаны
   в filter-menu.css — здесь остались только правила под ширину экрана,
   иначе один и тот же элемент задавался бы в двух местах разными цветами. */

@media (max-width: 1024px) {
    .table-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .search-container {
        flex: 1 1 100%;
    }
    .actions-container {
        flex-wrap: wrap;
    }
    .itc-modal-content {
        max-width: 92vw !important;
        margin: 1rem auto !important;
    }
}

@media (max-width: 640px) {
    [id$="Table"]:not(#campaignsTable):not(#clicksTable) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Разделы, ещё не переведённые на общую таблицу. Переведённые сюда
       не попадают: их раскладку целиком ведёт gg-table.css, а правило
       по идентификатору перебило бы её по весу селектора. */
    #clicksTable,
    #domainsTable,
    #funnelsTable,
    #preLandTable,
    #whiteTable,
    #thxTable {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .search-container input {
        width: 100%;
    }
    .actions-container {
        width: 100%;
        justify-content: flex-end;
    }

    /* Панель фильтров на телефоне занимает весь экран */
    .filter-menu {
        left: auto !important;
        right: -100% !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    .filter-menu.open {
        right: 0 !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   Таблица занимает оставшуюся высоту окна и прокручивается внутри
   себя — шапка раздела и фильтры при этом остаются на месте.
   ───────────────────────────────────────────────────────────── */
body, html {
    height: 100%;
}

.main-content,
.content-wrapper,
main.content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Разделы, ещё не переведённые на общую таблицу. У переведённых высоту
   и прокрутку задаёт gg-table.css: там это описано через классы, а не
   через список идентификаторов, который приходилось дописывать под
   каждый новый раздел — и в котором #clicksTable, например, никогда
   ничего не значил, потому что контейнер в разметке зовётся clicks_table. */
#domainsTable,
#funnelsTable,
#preLandTable,
#whiteTable,
#thxTable {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Шапка таблицы остаётся видимой при прокрутке */
.mat-table thead th,
.mat-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}