.custom-table table {
    thead tr th {
        font-size: 13px;
        font-family: var(--font-semibold);
        background-color: var(--table-th-bg-color);
        color: var(--table-th-color);
        border: none !important;
        padding: 14px 16px;
        text-wrap: nowrap;
        vertical-align: middle;
        border-collapse: collapse !important;
    }

    tbody tr td {
        font-size: 14px;
        font-family: var(--font-regular);
        color: var(--table-td-color);
        border-bottom: 1px solid var(--table-border-color);
        background-color: transparent;
        padding: 14px 16px;
        vertical-align: middle;
        text-wrap: nowrap;
    }

    thead tr th:first-child {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    thead tr th:last-child {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
}

#invoiceDetails .custom-table {
    max-height: 522px;
}

/*pagination*/
.pagination ul li a {
    border-radius: 10px;
    min-width: 30px;
    min-height: 34px;
    color: var(--black-color);
    background-color: #fff;
    border: 1.5px solid #d8d8d8;

    &.prev-first,
    &.prev {
        transform: rotate(180deg);
    }

    &.active,
    &:hover,
    &:focus {
        background-color: var(--primary-color);
        border: 1px solid var(--primary-color);
        color: #fff !important;
        box-shadow: none;

        img {
            filter: brightness(0) saturate(100%) invert(100%);
        }
    }
}

.pagination {

    .page-item:first-child .page-link,
    .page-item:last-child .page-link {
        border-radius: 10px !important;
    }
}


/* advance filter panel styles */
.advanced-filter-panel {
    z-index: 9999 !important;
    min-width: 432px;
}


/* accordion styles */
.accordion-arrow.collapsed {
    transform: rotate(-90deg);
}

.custom-table table {
    .accordion-body {
        border-left: 3px solid var(--purple-70);
        background: #FFF;
        max-height: 220px;
        overflow: auto;
    }
}

/* custom tooltip structure */
.custom-tooltip-container {
    display: none !important;
    position: absolute;
    /* right: 8%;
    bottom: -70%; */
    z-index: 9999;
    left: 41%;
    right: 42%;
    top: 50px;
    transform: translate(-50%, -50%);

    .tooltip-arrow {
        width: 10px;
        height: 10px;
        background-color: var(--grey-100);
        border-radius: 0.5px;
        transform: rotate(45deg);
        position: absolute;
        left: 62px;
        top: 5px;
    }

    .custom-tooltip-body {
        background-color: var(--grey-100);
        color: #fff;
        width: max-content;
    }
}

.user-status-badge+.custom-tooltip-container,
.user-status-badge~.custom-tooltip-container {
    left: 35%;
    right: 42%;
    transform: translate(-50%, -50%);

    .tooltip-arrow {
        left: 42px;
    }
}

.custom-grid-tooltip .tooltip-label:hover+.custom-tooltip-container,
.custom-grid-tooltip .user-status-badge:hover+.custom-tooltip-container {
    display: block !important;
}

/* Bot response menu tooltip - keep visible on hover */
.bot-response-menu .custom-grid-tooltip:hover .custom-tooltip-container {
    display: block !important;
}

/* Category tooltip arrow positioning */
.custom-grid-tooltip .custom-tooltip-container .tooltip-arrow {
    left: 20px !important;
    top: 5px !important;
}