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

.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;
  color: #3a3a3a !important;
}

.advanced-table-filter-bar {
  margin-bottom: 40px !important;
  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 !important;
  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 0.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%;
  font-family: "Noto Sans";
}

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

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

table.advanced-table th.sorting {
  position: relative;
  padding-right: 20px; /* space for arrows */
}

table.advanced-table th.sorting::before,
table.advanced-table th.sorting::after {
  position: absolute;
  right: 6px;
  font-size: 10px;
  color: #999;
  line-height: 1;
}

/* Up arrow */
table.advanced-table th.sorting::before {
  /* content: "▲";
  top: 45%; */
  content: "" !important;
  position: absolute;

  /* inset = top right bottom left */
  inset: 35% 6px auto auto;

  width: 10px;
  height: 8px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4' fill='none'%3E%3Cpath d='M8 4L4 0L0 4H8Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Down arrow */
table.advanced-table th.sorting::after {
  /* content: "▼";
  top: 55% !important; */
  /* margin-top: 20px; */
  content: "" !important;
  position: absolute;

  /* inset = top right bottom left */
  inset: 50% 6px auto auto;

  width: 10px;
  height: 8px;

  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" fill="none"><path d="M8 0L4 4L0 0H8ZM0 -8L4 -12L8 -8H0Z" fill="white"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
}

table.advanced-table th.sorting:first-child::after {
  display: none;
}

table.advanced-table th.sorting:first-child::before {
  display: none;
}




table.advanced-table th.sorting::before,
table.advanced-table th.sorting::after {
  color: #fff;
  opacity: 1 !important;
  /* margin: 9px 0; */
  /* max-height: 4px; */
  font-size: 12px !important;
}

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: 0.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;
  font-family: "Sora";
}

.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 !important;
  align-items: center !important;
  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 0.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 (min-width: 769px) {
  table.advanced-table td {
    font-size: 16px;
  }
}

@media only screen and (max-width: 1561px) {
  .dataTables_filter input,
  .advanced-table-search {
    min-width: 200px;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

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

@media only screen and (max-width: 1281px) {
  .dataTables_filter input,
  .advanced-table-search {
    min-width: 200px;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media only screen and (max-width: 1200px) {
  .dataTables_filter input,
  .advanced-table-search {
    min-width: 99%;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

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

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

  .dataTables_scrollHeadInner table.advanced-table th {
    padding: 5px 14px;
    white-space: normal;
  }

  /* table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting_asc_disabled,table.dataTable thead>tr>th.sorting_desc_disabled,table.dataTable thead>tr>td.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting_asc_disabled,table.dataTable thead>tr>td.sorting_desc_disabled {
    cursor: pointer;
    position: relative;
    padding-right: 16px
} */

}

@media only screen and (max-width: 768px) {
  .dataTables_filter input,
  .advanced-table-search {
    min-width: 100%;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  table.advanced-table td {
    font-size: 13px;
  }
  .advanced-table-pagination-container {
    background-color: #fff;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex !important;
    /* flex-direction: column !important; */
    justify-content: space-between !important;
    gap: 20px !important;
  }

  .advanced-table-filter-item {
    width: 100%;
  }
  .advanced-table-filter-label {
    font-size: 13px;
  }

  table.advanced-table th {
    font-size: 14px;
  }
  .advanced-table-load-more {
    font-size: 14px;
    padding: 8px 15px;
    white-space: nowrap !important;
  }
  span.advanced-table-info {
    font-size: 13px;
    /* min-width: 100% !important; */
  }

  .dataTables_scrollHeadInner table.advanced-table th {
    padding: 10px 16px;
  }
}