/* ─── Table card container ──────────────────────────────────────────────── */

.table-card {
    display: flex;
    flex-direction: column;
    margin: 0 var(--space-6) var(--space-6) var(--space-6);
    border: 1px solid var(--grey-3);
    border-radius: var(--border-radius-08);
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.05);
}

/* ─── Generic data table ────────────────────────────────────────────────── */

.data-table {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th {
        padding: var(--space-3) var(--space-6);
        background: var(--grey-2);
        border-bottom: 1px solid var(--grey-3);
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-semi-bold);
        color: var(--grey-7);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
    }

/* ─── Row ───────────────────────────────────────────────────────────────── */

.data-table tbody tr td {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--grey-3);
    background: var(--white);
    vertical-align: middle;
}

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

.data-table tbody tr:hover td {
    background: var(--grey-1);
}

.data-table tbody tr:nth-child(even) td {
    background: var(--grey-0);
}

.data-table tbody tr:nth-child(even):hover td {
    background: var(--grey-1);
}

/* ─── Avatar initials ───────────────────────────────────────────────────── */

.row-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--marine-1);
    color: var(--marine-8);
    font-weight: var(--font-weight-semi-bold);
    font-size: var(--font-size-p);
}

/* ─── Row cell helpers ──────────────────────────────────────────────────── */

.cell-fill {
    width: 100%;
}

.cell-nowrap {
    white-space: nowrap;
}

.cell-actions > .btn {
    float: right;
}

.row-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.row-primary-text {
    font-weight: var(--font-weight-semi-bold);
    color: var(--grey-10);
}