.table-block {
    padding: 60px 0;
}

.table-block__text {
    margin-bottom: 32px;
}

/* Скругление на скроллящейся обёртке само обрезает углы таблицы. */
.table-block__scroll {
    overflow-x: auto;
    border-radius: 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-primary) var(--bg-cards);
}

.table-block__scroll::-webkit-scrollbar {
    height: 8px;
}

.table-block__scroll::-webkit-scrollbar-track {
    background: var(--bg-cards);
}

.table-block__scroll::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: var(--brand-primary);
}

/* table-layout: fixed даёт колонки одинаковой ширины, как в макете. */
.table-block__table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    table-layout: fixed;
}

.table-block__table th,
.table-block__table td {
    padding: 16px 24px;
    text-align: left;
}

.table-block__table thead {
    background: var(--brand-secondary);
}

.table-block__table th {
    color: var(--text-white);
}

.table-block__table tbody tr {
    background: var(--bg);
}

.table-block__table tbody tr:nth-child(even) {
    background: var(--border-on-light);
}

.table-block__table td {
    border-bottom: 1px solid var(--border-on-light);
}

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

.table-block__cell--primary {
    color: var(--brand-primary);
}

.table-block__badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 100px;
    background: var(--state-success);
    color: var(--state-success-2);
}

@media (max-width: 1080px) {

    .table-block {
        padding: 30px 0;
    }

    .table-block__text {
        margin-bottom: 24px;
    }

    .table-block__scroll {
        border-radius: 16px;
    }

    .table-block__table th,
    .table-block__table td {
        padding: 12px 16px;
    }
}