.tableComponent {
    background-color: var(--chakra-colors-surface) !important;
    color: var(--chakra-colors-text-secondary);
    border-radius: 14px;
}

/* =========================
   TABLE BODY
   ========================= */

.tableComponent .rdt_Table {
    background-color: var(--chakra-colors-surface) !important;
    color: var(--chakra-colors-text-secondary);
}

.tableComponent .rdt_TableBody {
    background-color: var(--chakra-colors-surface) !important;
}

.tableComponent .rdt_TableRow {
    min-height: 68px;
    font-size: 14px;
    color: var(--chakra-colors-text-secondary) !important;
    border-bottom: 1px solid var(--chakra-colors-border-subtle) !important;
    background-color: var(--chakra-colors-surface) !important;
    transition: background-color 0.2s ease;
}

.tableComponent .rdt_TableRow:hover {
    background-color: var(--chakra-colors-surface-hover) !important;
    cursor: pointer;
}

.tableComponent .rdt_TableCell {
    white-space: normal;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 12px;
    padding-bottom: 12px;
    color: var(--chakra-colors-text-secondary) !important;
}


/* =========================
   TABLE HEADER
   ========================= */

.tableComponent .rdt_TableHead {
    min-height: 54px;
    background-color: var(--chakra-colors-surface-subtle) !important;
}

.tableComponent .rdt_TableHeadRow {
    background-color: var(--chakra-colors-surface-subtle) !important;
    border-bottom: 1px solid var(--chakra-colors-border-default) !important;
}

.tableComponent .rdt_TableCol {
    background-color: var(--chakra-colors-surface-subtle) !important;
    color: var(--chakra-colors-text-secondary) !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--chakra-colors-border-default) !important;
    padding-left: 18px;
    padding-right: 18px;
}

.tableComponent .rdt_TableCol_Sortable {
    color: var(--chakra-colors-text-secondary) !important;
}

.tableComponent .rdt_TableCol_Sortable:hover {
    color: var(--chakra-colors-text-primary) !important;
}


/* =========================
   PAGINATION
   ========================= */

.tableComponent .rdt_Pagination {
    min-height: 64px !important;

    background-color: var(--chakra-colors-surface) !important;

    border-top: 1px solid
    var(--chakra-colors-border-subtle) !important;

    padding-left: 16px !important;
    padding-right: 16px !important;

    color: var(--chakra-colors-text-muted) !important;

    font-size: 13px;

    border-radius: 0 !important;
}

/*
 * react-data-table-component wraps
 * pagination content in several elements.
 * Force the entire footer tree to inherit
 * the theme background.
 */

/* =========================
   PAGINATION
   ========================= */

.rdt_Pagination {
    min-height: 64px !important;
    width: 100% !important;

    background-color: var(--chakra-colors-surface) !important;

    border-top: 1px solid
    var(--chakra-colors-border-subtle) !important;

    color: var(--chakra-colors-text-muted) !important;

    font-size: 13px;

    border-radius: 0 !important;
}

/* Pagination internal containers */
.rdt_Pagination > div {
    background-color: var(--chakra-colors-surface) !important;
    color: var(--chakra-colors-text-muted) !important;
}

.rdt_Pagination > div > div {
    background-color: var(--chakra-colors-surface) !important;
}

/* Rows-per-page select */
.rdt_Pagination select {
    background-color: var(--chakra-colors-surface-subtle) !important;
    color: var(--chakra-colors-text-secondary) !important;
    border: 1px solid
    var(--chakra-colors-border-default) !important;
}

/* Pagination buttons */
.rdt_Pagination button {
    background-color: transparent !important;
    color: var(--chakra-colors-text-muted) !important;
}

.rdt_Pagination button:hover:not(:disabled) {
    background-color: var(--chakra-colors-surface-hover) !important;
    color: var(--chakra-colors-text-primary) !important;
}

.rdt_Pagination button:disabled {
    background-color: transparent !important;
    color: var(--chakra-colors-text-subtle) !important;
    opacity: 0.5;
}

.rdt_Pagination svg {
    color: inherit;
    fill: currentColor;
}


/* =========================
   NO DATA
   ========================= */

/*
 * react-data-table-component renders
 * the no-data content inside the table body
 * without a stable semantic class.
 */

.tableComponent [role="table"] > div:only-child {
    background-color: var(--chakra-colors-surface) !important;
    color: var(--chakra-colors-text-subtle) !important;
    min-height: 180px !important;
    width: 100% !important;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================
   SELECTED ROWS
   ========================= */

.tableComponent .rdt_TableRow.selected {
    background-color: var(--chakra-colors-surface-hover) !important;
}

.tableComponent .rdt_TableRow.selected:hover {
    background-color: var(--chakra-colors-surface-hover) !important;
}


/* =========================
   LOADING
   ========================= */

.tableComponent .rdt_TableBody > div[role="progressbar"] {
    background-color: var(--chakra-colors-surface) !important;
}

.tableComponent .rdt_ProgressWrapper {
    background-color: var(--chakra-colors-surface) !important;
    color: var(--chakra-colors-text-muted) !important;
}