/* ============================================================
   Таблицы, списки, значки

   Главное решение файла — таблица на телефоне.

   Раньше список ботов имел семь колонок и на экране 375px уезжал в
   горизонтальный скролл: чтобы увидеть последнюю колонку, приходилось
   тащить таблицу вбок, теряя из виду имя бота в первой. Здесь та же
   разметка ниже 768px разворачивается в карточки — строка становится
   карточкой, ячейка — парой «подпись → значение». Подпись берётся из
   атрибута data-label, поэтому шапка таблицы не дублируется в вёрстке.
   ============================================================ */

.table-wrap {
    width: 100%;
    min-width: 0;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.table th {
    padding: var(--space-3) var(--space-3);
    text-align: left;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table__num {
    text-align: right;
    font-variant-numeric: var(--numeric);
    white-space: nowrap;
}

.table th.table__num {
    text-align: right;
}

/* Сортируемый заголовок */
.table__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.table__sort:hover {
    color: var(--text);
}

.table__sort.is-active {
    color: var(--accent);
}

/* --- Телефон: строки становятся карточками ---------------------- */

@media (max-width: 767px) {
    .table,
    .table tbody,
    .table tr,
    .table td {
        display: block;
        width: 100%;
    }

    .table thead {
        display: none;
    }

    .table tbody tr {
        margin-bottom: var(--space-2);
        padding: var(--space-1) var(--space-3);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
    }

    .table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* Ячейка переносится, а не вылезает за карточку: в колонке
           «Получат рассылку» рядом со значением стоит ещё «из N» и
           «−N недоступны», и в 360px они втроём не укладываются */
        flex-wrap: wrap;
        gap: var(--space-3);
        padding: var(--space-2) 0;
        border-bottom: 1px solid var(--border-subtle);
        text-align: right;
        overflow-wrap: anywhere;
    }

    /* На десктопе .d-block переносит пояснение на вторую строку ячейки.
       В карточке ячейка — флекс-строка, где display: block ничего не
       переносит, поэтому вторую строку задаём отдельной полосой */
    .table td > .d-block {
        flex: 1 0 100%;
    }

    .table td:last-child {
        border-bottom: none;
    }

    .table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
        color: var(--text-muted);
        text-align: left;
    }

    /* Первая ячейка — заголовок карточки: подпись ей не нужна, и она
       занимает всю ширину */
    .table td[data-primary] {
        justify-content: flex-start;
        padding-top: var(--space-3);
        font-weight: var(--weight-semibold);
        text-align: left;
    }

    .table td[data-primary]::before {
        display: none;
    }

    /* Колонки, которые на телефоне только мешают: технические ID,
       длинные даты, дублирующие счётчики */
    .table td.hide-mobile,
    .table th.hide-mobile {
        display: none;
    }
}

@media (min-width: 768px) {
    .table tbody tr {
        transition: background var(--duration-fast) var(--ease);
    }

    .table tbody tr:hover {
        background: var(--surface-hover);
    }

    /* Прокрутка нужна только очень широким таблицам и только на десктопе,
       где видно, что она есть */
    .table-wrap--scroll {
        overflow-x: auto;
    }

    .table-wrap--scroll .table {
        min-width: 720px;
    }
}

/* ============================================================
   Список-строки: альтернатива таблице там, где колонок мало
   ============================================================ */

.list {
    display: flex;
    flex-direction: column;
}

.list__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    color: inherit;
    transition: background var(--duration-fast) var(--ease);
}

.list__item:last-child {
    border-bottom: none;
}

a.list__item:hover {
    background: var(--surface-hover);
}

.list__main {
    flex: 1;
    min-width: 0;
}

.list__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list__meta {
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list__value {
    flex-shrink: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-variant-numeric: var(--numeric);
    text-align: right;
}

/* ============================================================
   Аватар
   ============================================================ */

.avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    overflow: hidden;
    object-fit: cover;
}

.avatar--sm { width: 28px; height: 28px; font-size: var(--text-2xs); }
.avatar--lg { width: 52px; height: 52px; font-size: var(--text-base); }

/* Кнопка поверх аватара: обновление картинки из Telegram */
.avatar__action {
    position: absolute;
    right: -4px;
    bottom: -4px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

/* Цветной аватар-иконка: в ленте событий тип виден до чтения текста */
.avatar--primary { background: var(--accent-soft); color: var(--accent); }
.avatar--success { background: var(--success-soft); color: var(--success); }
.avatar--warning { background: var(--warning-soft); color: var(--warning); }
.avatar--danger { background: var(--danger-soft); color: var(--danger); }
.avatar--info { background: var(--info-soft); color: var(--info); }

/* ============================================================
   Значки и статусы
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--neutral-soft);
    color: var(--text-secondary);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    line-height: 1.6;
}

.badge--accent { background: var(--accent-soft); color: var(--accent); }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--info { background: var(--info-soft); color: var(--info); }

.badge--outline {
    background: transparent;
    border: 1px solid var(--border-strong);
}

/* Состояние бота: точка плюс подпись. Цвет дублируется текстом — по
   одному цвету статус не читается теми, кто их не различает */
.state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.state__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted);
}

.state--active { color: var(--success); }
.state--active .state__dot { background: var(--success); }

.state--slow { color: var(--warning); }
.state--slow .state__dot { background: var(--warning); }

.state--idle { color: var(--text-muted); }
.state--idle .state__dot { background: var(--text-muted); }

/* Пульсация только у живых: анимировать все точки сразу — значит
   превратить список из двухсот ботов в мерцающий экран */
.state--active .state__dot {
    box-shadow: 0 0 0 0 var(--success-soft);
    animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
    70% { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ============================================================
   Прогресс
   ============================================================ */

.progress {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    overflow: hidden;
}

.progress__bar {
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width var(--duration-slow) var(--ease-out);
}

.progress__bar--success { background: var(--success); }
.progress__bar--warning { background: var(--warning); }
.progress__bar--danger { background: var(--danger); }
.progress__bar--neutral { background: var(--border-strong); }

/* Составная полоса: доставлено / заблокировали / удалены — в одной строке
   вместо трёх отдельных чисел */
.progress--stacked {
    display: flex;
    height: 10px;
}

.progress--stacked .progress__bar {
    border-radius: 0;
    transition: width var(--duration-slow) var(--ease-out);
}

.progress--stacked .progress__bar:first-child {
    border-radius: var(--radius-full) 0 0 var(--radius-full);
}

.progress--stacked .progress__bar:last-child {
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

/* ============================================================
   Пагинация
   ============================================================ */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) 0;
}

.pagination__info {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-variant-numeric: var(--numeric);
}