/**
 * DataTables.net 2.x – Official Tailwind CSS base
 * Source: https://cdn.datatables.net/2.3.7/css/dataTables.tailwindcss.css
 */
:root {
  --dt-row-selected: 13, 110, 253;
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-selected-link: 228, 228, 228;
  --dt-row-stripe: 0, 0, 0;
  --dt-row-hover: 0, 0, 0;
  --dt-column-ordering: 0, 0, 0;
  --dt-header-align-items: center;
  --dt-header-vertical-align: middle;
  --dt-html-background: white;
}
:root.dark {
  --dt-html-background: rgb(33, 37, 41);
}

table.dataTable tbody td.dt-control {
  text-align: center;
  cursor: pointer;
}
table.dataTable tbody td.dt-control:before {
  display: inline-block;
  box-sizing: border-box;
  content: "";
  border-top: 5px solid transparent;
  border-left: 10px solid rgba(0, 0, 0, 0.5);
  border-bottom: 5px solid transparent;
  border-right: 0px solid transparent;
}
table.dataTable tbody tr.dt-hasChild td.dt-control:before {
  border-top: 10px solid rgba(0, 0, 0, 0.5);
  border-left: 5px solid transparent;
  border-bottom: 0px solid transparent;
  border-right: 5px solid transparent;
}
table.dataTable tfoot:empty {
  display: none;
}

html.dark table.dataTable td.dt-control:before,
:root[data-bs-theme=dark] table.dataTable td.dt-control:before,
:root[data-theme=dark] table.dataTable td.dt-control:before {
  border-left-color: rgba(255, 255, 255, 0.5);
}
html.dark table.dataTable tr.dt-hasChild td.dt-control:before,
:root[data-bs-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before,
:root[data-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before {
  border-top-color: rgba(255, 255, 255, 0.5);
  border-left-color: transparent;
}

div.dt-scroll {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  overflow: hidden;
}
/* ScrollY: extend last column into scrollbar gutter so no gap */
.dt-scroll-body table.dataTable tbody tr td:last-child {
  padding-right: 1rem;
}
div.dt-scroll-body thead tr,
div.dt-scroll-body tfoot tr {
  height: 0;
}
div.dt-scroll-body thead tr th, div.dt-scroll-body thead tr td,
div.dt-scroll-body tfoot tr th, div.dt-scroll-body tfoot tr td {
  height: 0 !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  border-top-width: 0px !important;
  border-bottom-width: 0px !important;
}
div.dt-scroll-body thead tr th div.dt-scroll-sizing, div.dt-scroll-body thead tr td div.dt-scroll-sizing,
div.dt-scroll-body tfoot tr th div.dt-scroll-sizing, div.dt-scroll-body tfoot tr td div.dt-scroll-sizing {
  height: 0 !important;
  overflow: hidden !important;
}

table.dataTable thead > tr > th:active,
table.dataTable thead > tr > td:active {
  outline: none;
}
/* Sort icons – KTDataTable style (stacked chevron SVGs) */
table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order, table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order, table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order, table.dataTable thead > tr > td.dt-orderable-desc .dt-column-order, table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order, table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 0.975rem;
  height: 0.975rem;
  gap: 0.125rem;
  line-height: 1;
}
table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-desc .dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-desc .dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order:after {
  display: inline-block;
  content: '';
  height: 0.25rem;
  width: 0.438rem;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  opacity: 1;
  line-height: inherit;
  font-size: inherit;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* Default (unsorted) – both chevrons #78829D */
table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order:before,
table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order:before, table.dataTable thead > tr > td.dt-orderable-desc .dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order:before, table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%2378829D'/%3E%3C/svg%3E");
}
table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order:after,
table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order:after, table.dataTable thead > tr > td.dt-orderable-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order:after, table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%2378829D'/%3E%3C/svg%3E");
}
/* Ascending – up chevron active #4B5675, down muted #C9CEDA */
table.dataTable thead > tr > th[aria-sort='ascending'] .dt-column-order:before,
table.dataTable thead > tr > td[aria-sort='ascending'] .dt-column-order:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%234B5675'/%3E%3C/svg%3E");
}
table.dataTable thead > tr > th[aria-sort='ascending'] .dt-column-order:after,
table.dataTable thead > tr > td[aria-sort='ascending'] .dt-column-order:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%23C9CEDA'/%3E%3C/svg%3E");
}
/* Descending – up muted #C9CEDA, down chevron active #4B5675 */
table.dataTable thead > tr > th[aria-sort='descending'] .dt-column-order:before,
table.dataTable thead > tr > td[aria-sort='descending'] .dt-column-order:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M1.08333 4.83333C0.908333 4.83333 0.791667 4.775 0.675 4.65833C0.441667 4.425 0.441667 4.075 0.675 3.84167L3.59167 0.925C3.825 0.691667 4.175 0.691667 4.40833 0.925L7.325 3.84167C7.55833 4.075 7.55833 4.425 7.325 4.65833C7.09167 4.89167 6.74167 4.89167 6.50833 4.65833L4 2.15L1.49167 4.65833C1.375 4.775 1.25833 4.83333 1.08333 4.83333Z' fill='%23C9CEDA'/%3E%3C/svg%3E");
}
table.dataTable thead > tr > th[aria-sort='descending'] .dt-column-order:after,
table.dataTable thead > tr > td[aria-sort='descending'] .dt-column-order:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'%3E%3Cpath d='M4 4.24984C3.825 4.24984 3.70833 4.1915 3.59167 4.07484L0.675 1.15817C0.441667 0.924838 0.441667 0.574837 0.675 0.341504C0.908333 0.108171 1.25833 0.108171 1.49167 0.341504L4 2.84984L6.50833 0.341504C6.74167 0.108171 7.09167 0.108171 7.325 0.341504C7.55833 0.574837 7.55833 0.924838 7.325 1.15817L4.40833 4.07484C4.29167 4.1915 4.175 4.24984 4 4.24984Z' fill='%234B5675'/%3E%3C/svg%3E");
}
table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc,
table.dataTable thead > tr > td.dt-orderable-asc, table.dataTable thead > tr > td.dt-orderable-desc {
  cursor: pointer;
}
table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > td.dt-orderable-asc:hover, table.dataTable thead > tr > td.dt-orderable-desc:hover {
  outline: 2px solid rgba(0, 0, 0, 0.05);
  outline-offset: -2px;
}
table.dataTable thead > tr > th.dt-orderable-none:not(.dt-ordering-asc, .dt-ordering-desc) .dt-column-order:empty, table.dataTable thead > tr > th.sorting_desc_disabled .dt-column-order:after, table.dataTable thead > tr > th.sorting_asc_disabled .dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-none:not(.dt-ordering-asc, .dt-ordering-desc) .dt-column-order:empty, table.dataTable thead > tr > td.sorting_desc_disabled .dt-column-order:after, table.dataTable thead > tr > td.sorting_asc_disabled .dt-column-order:before {
  display: none;
}
/* Hide sort icon on non-sortable columns (e.g. checkbox, actions) - DataTables may still add dt-ordering-asc */
table.dataTable thead > tr > th.dt-orderable-none .dt-column-order,
table.dataTable thead > tr > td.dt-orderable-none .dt-column-order {
  display: none !important;
}
table.dataTable thead > tr > th div.dt-column-header, table.dataTable thead > tr > th div.dt-column-footer, table.dataTable thead > tr > td div.dt-column-header, table.dataTable thead > tr > td div.dt-column-footer,
table.dataTable tfoot > tr > th div.dt-column-header, table.dataTable tfoot > tr > th div.dt-column-footer, table.dataTable tfoot > tr > td div.dt-column-header, table.dataTable tfoot > tr > td div.dt-column-footer {
  display: flex;
  justify-content: space-between;
  align-items: var(--dt-header-align-items);
  gap: 4px;
}
table.dataTable thead > tr > th div.dt-column-header .dt-column-title, table.dataTable thead > tr > th div.dt-column-footer .dt-column-title, table.dataTable thead > tr > td div.dt-column-header .dt-column-title, table.dataTable thead > tr > td div.dt-column-footer .dt-column-title,
table.dataTable tfoot > tr > th div.dt-column-header .dt-column-title, table.dataTable tfoot > tr > th div.dt-column-footer .dt-column-title, table.dataTable tfoot > tr > td div.dt-column-header .dt-column-title, table.dataTable tfoot > tr > td div.dt-column-footer .dt-column-title {
  flex-grow: 1;
}
table.dataTable thead > tr > th div.dt-column-header .dt-column-title:empty, table.dataTable thead > tr > th div.dt-column-footer .dt-column-title:empty, table.dataTable thead > tr > td div.dt-column-header .dt-column-title:empty, table.dataTable thead > tr > td div.dt-column-footer .dt-column-title:empty,
table.dataTable tfoot > tr > th div.dt-column-header .dt-column-title:empty, table.dataTable tfoot > tr > th div.dt-column-footer .dt-column-title:empty, table.dataTable tfoot > tr > td div.dt-column-header .dt-column-title:empty, table.dataTable tfoot > tr > td div.dt-column-footer .dt-column-title:empty {
  display: none;
}
div.dt-scroll-body > table.dataTable > thead > tr > th, div.dt-scroll-body > table.dataTable > thead > tr > td {
  overflow: hidden;
}
:root.dark table.dataTable thead > tr > th.dt-orderable-asc:hover, :root.dark table.dataTable thead > tr > th.dt-orderable-desc:hover, :root.dark table.dataTable thead > tr > td.dt-orderable-asc:hover, :root.dark table.dataTable thead > tr > td.dt-orderable-desc:hover,
:root[data-bs-theme=dark] table.dataTable thead > tr > th.dt-orderable-asc:hover, :root[data-bs-theme=dark] table.dataTable thead > tr > th.dt-orderable-desc:hover, :root[data-bs-theme=dark] table.dataTable thead > tr > td.dt-orderable-asc:hover, :root[data-bs-theme=dark] table.dataTable thead > tr > td.dt-orderable-desc:hover {
  outline: 2px solid rgba(255, 255, 255, 0.05);
}

/**
 * Metronic / Tailwind overrides
 */
@layer components {
  .dataTables_wrapper,
  .dt-container {
    font-family: inherit !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
    @apply text-foreground;
  }
  div[id$='_wrapper'] {
    width: 100% !important;
    max-width: 100% !important;
  }
  table.dataTable {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
    @apply border border-border;
    border-color: var(--border) !important;
  }
  /* ScrollY: no outer border on tables inside scroll – .dt-scroll is the single box so scrollbar is inside */
  .dt-scroll .dt-scroll-head table.dataTable,
  .dt-scroll .dt-scroll-body table.dataTable {
    border-width: 0 !important;
  }
  table.dataTable thead th,
  table.dataTable thead td {
    @apply border-b border-border bg-muted/50 px-4 py-3 text-left text-sm font-medium text-foreground;
  }
  table.dataTable tbody th,
  table.dataTable tbody td {
    @apply border-b border-border px-4 py-3 text-sm text-foreground;
  }
  table.dataTable tbody tr:hover {
    @apply bg-accent/50;
  }
  .dataTables_wrapper .dataTables_length,
  .dt-container .dt-length {
    @apply mb-4;
  }
  .dataTables_wrapper .dataTables_filter,
  .dt-container .dt-search {
    @apply mb-0;
  }
  .dt-layout-row .dt-length,
  .dataTables_wrapper .dt-layout-row .dataTables_length {
    @apply m-0 p-0;
  }
  .dataTables_wrapper .dataTables_length label,
  .dataTables_wrapper .dataTables_filter label,
  .dt-container .dt-length label,
  .dt-container .dt-search label {
    @apply flex flex-wrap items-center gap-2 text-sm text-foreground;
  }
  .dataTables_wrapper .dataTables_length label,
  .dt-container .dt-length label {
    font-size: 0;
  }
  .dataTables_wrapper .dataTables_filter label,
  .dt-container .dt-search label {
    font-size: 0;
  }
  .dataTables_wrapper .dataTables_filter input,
  .dt-container .dt-search input.dt-input {
    font-size: 0.8125rem;
    @apply block rounded-md h-8.5 px-3 leading-normal w-48 max-w-full;
    @apply bg-background border border-input text-foreground shadow-xs shadow-[rgba(0,0,0,0.05)] transition-[color,box-shadow];
    @apply placeholder:text-muted-foreground;
    @apply focus-visible:outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30;
  }
  .dataTables_wrapper .dataTables_length select,
  .dt-container .dt-length select.dt-input {
    font-size: 0.75rem;
    @apply rounded-md cursor-pointer appearance-none w-16 h-7 ps-2.5 pe-5 text-xs leading-normal;
    @apply bg-background border border-input text-foreground shadow-xs shadow-[rgba(0,0,0,0.05)] transition-[color,box-shadow];
    @apply focus-visible:outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30;
    background-repeat: no-repeat;
    background-size: 14px 11px;
    background-position: right 0.5rem center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239f9fa9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  }
  .dataTables_wrapper .dt-layout-row,
  .dt-container .dt-layout-row {
    @apply flex flex-row flex-wrap items-center gap-x-4 gap-y-2 mt-4 mb-4 px-4;
  }
  .dataTables_wrapper .dt-layout-row .dt-layout-start,
  .dt-container .dt-layout-row .dt-layout-start {
    @apply flex flex-row flex-nowrap items-center gap-x-3;
  }
  .dataTables_wrapper .dt-layout-row .dt-layout-end,
  .dt-container .dt-layout-row .dt-layout-end {
    @apply ml-auto flex flex-row flex-wrap items-center gap-x-2;
  }
  .dataTables_wrapper .dataTables_info,
  .dt-container .dt-info {
    @apply text-xs text-muted-foreground inline-flex items-center;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button,
  .dt-container .dt-paging .dt-paging-button {
    @apply mx-0.5 inline-flex h-7 min-w-[1.75rem] items-center justify-center rounded-md border border-border bg-background px-2 text-xs font-medium text-foreground;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover,
  .dt-container .dt-paging .dt-paging-button:not(.disabled):hover {
    @apply border-border bg-accent text-accent-foreground;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
  .dt-container .dt-paging .dt-paging-button.current {
    @apply border-primary bg-primary text-primary-foreground;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
  .dt-container .dt-paging .dt-paging-button.disabled {
    @apply cursor-not-allowed opacity-50;
  }
  /* Default hidden: DataTables toggles inline display; a flex default would show an empty bar whenever inline styles are missing or a hide is skipped. */
  .dataTables_wrapper .dataTables_processing,
  .dt-container .dt-processing {
    display: none;
    @apply gap-2 rounded-md border border-input bg-background px-4 py-4 text-sm text-foreground;
    min-height: 3.5rem;
  }
  /* ScrollY: scroll body background so scrollbar track is inside the table box */
  .dt-scroll .dt-scroll-body {
    @apply bg-background;
  }

  /* FixedHeader: floating header so it matches Metronic styling */
  .dtfh-floatingparent,
  .fixedHeader-floating {
    z-index: 10;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 0.375rem);
    background: var(--background);
  }

  /* Column filter: allow KtUI Select dropdown to show (no overflow clip) */
  table.dataTable thead tr th .column-filter-dropdown,
  table.dataTable thead tr th:has(.column-filter-dropdown) {
    overflow: visible;
  }

  /* Column filter docs demo: header row aligned with other examples (icon + sort chevrons) */
  table#example-column-filter thead > tr > th,
  table#example-column-filter thead > tr > td {
    @apply py-2;
    vertical-align: middle;
  }
  table#example-column-filter thead .dt-column-header {
    min-height: 0;
  }

  /* Column visibility demo: auto layout so remaining columns redistribute width on toggle */
  table#example-column-visibility {
    table-layout: auto !important;
  }
}