/* Filter Bar */
.advanced-table-filters-wrapper,
.advanced-table-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
}

.advanced-table-filters-wrapper {
    flex-wrap: wrap;
}

.advanced-table-filter-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.advanced-table-filter-label {
    font-weight: 700;
    font-size: 16px;

}

.advanced-table-filter-bar {
    margin-bottom: 40px;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Custom Select */
.advanced-table-custom-select {
    position: relative;
    min-width: 150px;
    font-size: 14px;
}

.dataTables_filter input,
.advanced-table-search {
    height: 45px;
    border: 1px solid #D8D5CC;
    padding: 10px 20px;
    border-radius: 4px;
    border-radius: 4px;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    min-width: 300px;
    max-width: 100%;
    color: #635B5B;
    font-size: 14px;
}

.dataTables_filter input::placeholder {
    opacity: 0.5;
}

.advanced-table-select-display {
    color: #635B5B;
    min-width: 220px;
    padding: 10px 20px;
    border: 1px solid var(--wp--preset--color--stroke);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    font-size: 14px;
}

.advanced-table-select-display::after {
    /* content: '▼'; */
    content: '';
    /* font-size: 0.8em; */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    /* color: #999; */

    content: '';
    width: 24px;
    height: 24px;
    background: url('https://hkcss.visibleone.site/wp-content/uploads/2025/12/table-dropdown-icon.svg');
    background-repeat: no-repeat;
    background-size: contain;

}

.advanced-table-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 2px;
}

.advanced-table-select-options.show {
    display: block;
}

.advanced-table-option {
    padding: 4px 12px;
    cursor: pointer;
    height: 34px;
    display: flex;
    align-items: center;
    transition: all .1s ease;
    min-height: fit-content;
}

.advanced-table-option:hover {
    background-color: #FBF8DD;
}

.advanced-table-option.active {
    color: #C13649;
}

/* Table Styles */
table.advanced-table {
    border-collapse: collapse;
    width: 100%;
}

table.advanced-table th,
table.advanced-table td {
    padding: 10px;
    border: none !important;
}

table.advanced-table td {
    box-shadow: inherit !important;
}


table.advanced-table th.sorting::before,
table.advanced-table th.sorting::after {
    color: #fff;
    opacity: 1 !important;
    margin: 2px 0;
}


table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:after {
    opacity: .6 !important;
}

table.dataTable.display>tbody>tr.odd>*,
table.dataTable.stripe>tbody>tr.odd>* {
    background-color: #fff;
    box-shadow: unset;
}

.advanced-table tbody tr td {
    padding: 14px 26px;
}

table.dataTable.display>tbody>tr.even>*,
table.dataTable.stripe>tbody>tr.even>* {
    background: #F8F7F6 !important;
}

table.advanced-table th {
    background-color: #3A3A3A;
    font-weight: bold;
    vertical-align: middle;
    font-size: 18px;
    font-weight: 600;
    color: #FFF;
}

.dataTables_scrollHeadInner table.advanced-table th {
    padding: 16px 26px;
    font-weight: 600;
}

span.advanced-table-info {
    color: #635B5B;
    font-size: 16px;
    font-weight: 400;
}

.advanced-table-pagination-container {
    margin-top: 26px;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
    padding: 12px 0;
}

.dataTables_scrollHead {
    border-radius: 10px 10px 0 0;
}

.dataTables_scrollBody {
    border: none !important;
}

.advanced-table-load-more {
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 1000px;
    border: 1px solid #3A3A3A;
    font-weight: 600;
    color: #3A3A3A;
    font-size: 18px;
    transition: all .2s ease;
}

.advanced-table-load-more:hover {
    background-color: #3A3A3A;
    color: #FFF;
}

table.advanced-table td {
    vertical-align: top;
    white-space: pre-wrap;
    /* Ensure text wraps */
}

/* Fix List Styling inside Table */
table.advanced-table ul {
    list-style-type: disc;
    margin-left: 20px;
    padding-left: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}

table.advanced-table ol {
    list-style-type: decimal;
    margin-left: 20px;
    padding-left: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}

table.advanced-table li {
    margin-bottom: 2px;
}

@media only screen and (max-width: 1561px) {

    .dataTables_filter input,
    .advanced-table-search {
        min-width: 200px;
    }

    .advanced-table-select-display {
        min-width: 150px;
    }
}

@media only screen and (max-width: 1281px) {

    .dataTables_filter input,
    .advanced-table-search {
        min-width: 200px;
    }
}

@media only screen and (max-width: 1200px) {

    .dataTables_filter input,
    .advanced-table-search {
        min-width: 100%;
    }

    .advanced-table-filter-item {
        width: 48%;
    }
}

@media screen and (max-width: 1025px) {
    .advanced-table-select-display {
        min-width: 220px;
    }
}

@media only screen and (max-width: 768px) {

    .dataTables_filter input,
    .advanced-table-search {
        min-width: 100%;
    }

    .advanced-table-filter-item {
        width: 100%;
    }
}