.dataTableBody {
    --table-body-background-header: #f9fafb;
    --table-body-background-body: #fff;
    --table-body-background-hover: #f3f4f6;
    --table-body-border: #e5e7eb;
    --table-body-text-primary: #111827;
    --table-body-text-secondary: #6b7280;
    --table-body-text-white: #ffffff;
    --table-body-status-active-bg: #d1fae5;
    --table-body-status-active-text: #065f46;
    --table-body-status-inactive-bg: #f3f4f6;
    --table-body-status-inactive-text: #1f2937;
    --table-body-button-primary: #111827;
    --table-body-button-primary-hover: #1f2937;

    overflow-x: auto;

    &__table {
        width: 100%;
        border-collapse: collapse;
    }

    &__thead {
        background-color: var(--table-body-background-header);
        border-bottom: 1px solid var(--table-body-border);
    }

    &__th {
        padding: 0.75rem 1.5rem;
        text-align: left;
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--table-body-text-secondary);
        cursor: pointer;
        user-select: none;
        transition: background-color 0.15s;

        &:hover {
            background-color: var(--table-body-background-hover);
        }
    }

    &__thContent {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    &__sortIcon {
        display: flex;
        align-items: center;
    }

    &__iconPlaceholder {
        width: 16px;
        height: 16px;
        display: inline-block;
    }

    &__tbody {
        background-color: var(--table-body-background-body);
    }

    &__row {
        border-bottom: 1px solid var(--table-body-border);
        transition: background-color 0.15s;

        &:last-child {
            border-bottom: none;
        }

        &:hover {
            background-color: var(--table-body-background-header);
        }
    }

    &__td {
        padding: 1rem 1.5rem;
        white-space: nowrap;
        font-size: 0.875rem;
        color: var(--table-body-text-primary);

        &--email {
            color: var(--table-body-text-secondary);
        }
        &--name {
            font-weight: 500;
        }

        &--empty {
            text-align: center;
            color: var(--table-body-text-secondary);
            padding: 2rem;
        }
    }

    &__status {
        display: inline-flex;
        padding: 0.125rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.25rem;
        border-radius: 9999px;

        &--active {
            background-color: var(--table-body-status-active-bg);
            color: var(--table-body-status-active-text);
        }

        &--inactive {
            background-color: var(--table-body-status-inactive-bg);
            color: var(--table-body-status-inactive-text);
        }
    }

    &__button {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 500;
        border-radius: 0.375rem;
        border: none;
        cursor: pointer;
        transition: background-color 0.15s;

        &--primary {
            background-color: var(--table-body-button-primary);
            color: var(--table-body-text-white);

            &:hover {
                background-color: var(--table-body-button-primary-hover);
            }
        }
    }
}
