/* ==========================================================================
   Travian Tools: Inactive Search + Elephant Scanner tabs
   (#tab-inactive-search, #tab-elephant-scanner). Tokens only, see
   DESIGN_SYSTEM.md. Components come from style.css; this file holds only
   tab layout and a few cell details.
   ========================================================================== */

/* ---- Search rows ---------------------------------------------------------
   .search-grid (style.css, section 15) is built for X | Y | range | actions.
   These modifiers keep the same rhythm for 3 or 4 plain fields. */

.search-grid.ts-search-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.search-grid.ts-search-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

@media (max-width: 1280px) {
    .search-grid.ts-search-grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .search-grid.ts-search-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .search-grid.ts-search-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .search-grid.ts-search-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Radius gets its own full row instead of a half-empty one */
    .search-grid.ts-search-grid--3 > .field:nth-child(3) {
        grid-column: 1 / -1;
    }
}

/* ---- Results header meta ("Проверено оазисов", "Скрыто фильтрами") ------ */

.ts-results-meta {
    color: var(--text-3);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.ts-results-meta:empty { display: none; }

/* ---- Shared table details ------------------------------------------------ */

:is(#inactive-results-table, #elephant-results-table) th.sortable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Desktop table: align the first/last column with the card padding.
   Below 900px .table--stack owns the cell padding. */
@media (min-width: 900px) {
    :is(#inactive-results-table, #elephant-results-table) th:first-child,
    :is(#inactive-results-table, #elephant-results-table) td:first-child {
        padding-left: var(--space-4);
    }

    :is(#inactive-results-table, #elephant-results-table) th:last-child,
    :is(#inactive-results-table, #elephant-results-table) td:last-child {
        padding-right: var(--space-4);
    }

    /* Two-word headers break onto two lines instead of widening the column */
    :is(#inactive-results-table, #elephant-results-table) thead th {
        height: 44px;
    }

    :is(#inactive-results-table, #elephant-results-table) thead th.th-wrap {
        white-space: normal;
        line-height: var(--leading-tight);
    }
}

/* ---- Inactive Search ----------------------------------------------------- */

#inactive-results-table .col-distance,
#inactive-results-table .col-inactive {
    white-space: nowrap;
}

#inactive-results-table .col-village,
#inactive-results-table .col-player,
#inactive-results-table .col-alliance {
    overflow-wrap: anywhere;
}

@media (min-width: 900px) {
    #inactive-results-table .col-village { min-width: 140px; }
    #inactive-results-table .col-player { min-width: 110px; }
}

.ts-village {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.ts-capital {
    display: inline-flex;
    align-items: center;
    color: var(--warning);
    font-size: var(--text-sm);
}

/* The filter card follows the search card: the hide-farmed switch sits in its own block */
#inactive-filters-section .filter-block {
    gap: var(--space-1);
}

#inactive-filters-section .filters-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

#inactive-filters-state {
    background: var(--accent-soft);
    color: var(--accent-text);
}

/* ---- Elephant Scanner ---------------------------------------------------- */

/* Elephants are the point of this tab: their count reads first in the list */
.troop.troop--key {
    color: var(--text);
    font-weight: var(--weight-semibold);
}

#elephant-results-table .col-details { min-width: 160px; }

#elephant-results-table .col-bonus .bonus-list { flex-wrap: nowrap; }

#elephant-results-table .updated-time {
    color: var(--text-2);
    white-space: nowrap;
}

#elephant-results-table .updated-time.fresh-data {
    color: var(--success);
    font-weight: var(--weight-medium);
}

#elephant-results-table .updated-time.old-data {
    color: var(--text-3);
}

@media (max-width: 899px) {
    /* No checkbox column here: drop the left gutter reserved for it */
    #elephant-results-table.table--stack tbody tr {
        padding-left: var(--space-4);
    }

    #elephant-results-table .col-bonus .bonus-list { flex-wrap: wrap; }

    /* Troops | updated on one row, the animal list below across the card */
    #elephant-results-table td.col-details {
        grid-column: 1 / -1;
        order: 1;
    }
}