/* Generic responsive rules for table-based admin pages
   (campaign, domain, funnel, preland, white, thx, clicks, statistic).
   Loaded globally via header.php. */

/* Badge over the filter-icon that shows # of active filters. See filter-menu.js -> renderFilterBadge() */
.filter-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    background: #f7a53b;
    color: #000;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.action-btn { position: relative; } /* anchor for .filter-badge */

@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):not(#reportTable) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #campaignsTable,
    #clicksTable,
    #reportTable,
    #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: center; /* user request: меню в мобильном по центру */
    }

    /* Filter sidebar — full-width on mobile, hidden by default,
       slides in when .open class applied (toggled by toggleFilterMenu()). */
    .filter-menu {
        left: auto !important;
        right: -100% !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    .filter-menu.open {
        right: 0 !important;
    }

    .stats-table-container,
    .clicks-table-container {
        padding: 8px !important;
    }
    .clicks-table,
    .stats-table {
        font-size: 0.75rem;
    }
    .clicks-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ─────────────────────────────────────────────────────────────
   Full-height table layout: main content fills the viewport,
   table body scrolls inside the container when rows overflow.
   Applies to pages where admin opens big tables.
   ───────────────────────────────────────────────────────────── */
body, html {
    height: 100%;
}

/* Flex container on the main content wrapper so the table can grow */
.main-content,
.content-wrapper,
main.content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Table containers (the <div id="...Table"> that MaterialTable renders into)
   should take remaining vertical space and scroll internally. */
#campaignsTable,
#domainsTable,
#funnelsTable,
#preLandTable,
#whiteTable,
#thxTable,
#clicksTable,
#reportTable {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Sticky header inside MaterialTable so columns stay visible while scrolling */
.mat-table thead th,
.clicks-table thead th,
.stats-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}