:root,
[data-theme='light'] {
  --sakdal-tabulator-shell-bg: var(--bg);
  --sakdal-tabulator-header-bg: #f4f7fb;
  --sakdal-tabulator-header-hover-bg: #edf2f9;
  --sakdal-tabulator-footer-bg: #eef3f9;
  --sakdal-tabulator-row-odd-bg: #f8fbff;
  --sakdal-tabulator-scrollbar-track: #dbe4f0;
  --sakdal-tabulator-scrollbar-thumb: #8ea2bf;
  --sakdal-tabulator-scrollbar-thumb-hover: #7288a9;
}

[data-theme='dark'] {
  --sakdal-tabulator-shell-bg: var(--bg);
  --sakdal-tabulator-header-bg: #22314a;
  --sakdal-tabulator-header-hover-bg: #2a3a56;
  --sakdal-tabulator-footer-bg: #242f44;
  --sakdal-tabulator-row-odd-bg: #2b384d;
  --sakdal-tabulator-scrollbar-track: #1d2740;
  --sakdal-tabulator-scrollbar-thumb: #5c6e8f;
  --sakdal-tabulator-scrollbar-thumb-hover: #7590bf;
}

.tabulator {
  border: 1px solid var(--border);
  border-top-color: transparent;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  color: var(--text);
  box-shadow: none;
}

.tabulator .tabulator-header {
  background: var(--sakdal-tabulator-header-bg);
  color: var(--text);
  border-top: 0 !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-header .tabulator-col-row-handle {
  background: var(--sakdal-tabulator-header-bg);
  color: var(--text);
  border-top: 0 !important;
  border-right-color: var(--border);
  border-bottom: 0;
  box-shadow: none;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
  background: var(--sakdal-tabulator-header-hover-bg);
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 0.95rem 1rem;
}

.tabulator .tabulator-col-title,
.tabulator .tabulator-header .tabulator-arrow,
.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter,
.tabulator .tabulator-cell,
.tabulator .tabulator-footer,
.tabulator .tabulator-footer label,
.tabulator .tabulator-counter,
.tabulator .tabulator-page,
.tabulator .tabulator-page-size,
.tabulator .tabulator-footer .tabulator-page-size-label {
  color: var(--text);
}

.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-footer,
.tabulator .tabulator-tableholder,
.tabulator .tabulator-row,
.tabulator .tabulator-cell {
  border-color: var(--border);
}

.tabulator .tabulator-tableholder {
  background: var(--sakdal-tabulator-shell-bg);
  scrollbar-width: thin;
  scrollbar-color: var(--sakdal-tabulator-scrollbar-thumb) var(--sakdal-tabulator-scrollbar-track);
}

.tabulator .tabulator-tableholder::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.tabulator .tabulator-tableholder::-webkit-scrollbar-track {
  background: var(--sakdal-tabulator-scrollbar-track);
  border-radius: 999px;
}

.tabulator .tabulator-tableholder::-webkit-scrollbar-thumb {
  background: var(--sakdal-tabulator-scrollbar-thumb);
  border-radius: 999px;
  border: 3px solid var(--sakdal-tabulator-scrollbar-track);
}

.tabulator .tabulator-tableholder::-webkit-scrollbar-thumb:hover {
  background: var(--sakdal-tabulator-scrollbar-thumb-hover);
}

.tabulator .tabulator-tableholder::-webkit-scrollbar-corner {
  background: var(--sakdal-tabulator-scrollbar-track);
}

.tabulator .tabulator-row {
  background: var(--bg);
  color: var(--text);
}

.tabulator .tabulator-row.tabulator-row-even {
  background: var(--bg);
}

.tabulator .tabulator-row.tabulator-row-odd {
  background: var(--sakdal-tabulator-row-odd-bg);
}

.tabulator .tabulator-row:hover,
.tabulator .tabulator-row.tabulator-selectable:hover {
  background: var(--bg-soft);
}

.tabulator .tabulator-row .tabulator-cell {
  padding: 0.95rem 1rem;
  background: transparent;
}

.tabulator .tabulator-header .tabulator-col:last-child,
.tabulator .tabulator-row .tabulator-cell:last-child {
  border-right: 0;
}

.tabulator .tabulator-footer {
  background: var(--sakdal-tabulator-footer-bg);
  padding: 0.75rem 1rem;
}

.tabulator .tabulator-footer .tabulator-footer-contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tabulator .tabulator-footer .tabulator-paginator,
.tabulator .tabulator-footer .tabulator-pages {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tabulator .tabulator-footer .tabulator-paginator {
  margin-left: auto;
}

.tabulator .tabulator-footer .tabulator-counter,
.tabulator .tabulator-footer label,
.tabulator .tabulator-footer .tabulator-page-size-label,
.tabulator .tabulator-footer .tabulator-page-size option {
  color: var(--text-muted);
}

.tabulator .tabulator-page,
.tabulator .tabulator-page-size {
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-soft);
  color: var(--text);
}

.tabulator .tabulator-page {
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
}

.tabulator .tabulator-page:hover,
.tabulator .tabulator-page-size:hover {
  background: var(--bg);
}

.tabulator .tabulator-page.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.tabulator .tabulator-page[disabled],
.tabulator .tabulator-page.disabled {
  opacity: 0.55;
  color: var(--text-muted);
}

.tabulator .tabulator-placeholder {
  background: var(--bg);
  color: var(--text-muted);
}

.tabulator-link {
  color: inherit;
  text-decoration: none;
}

.tabulator-link:hover {
  color: inherit;
  text-decoration: none;
}

.tabulator-text-secondary {
  color: var(--text-muted);
}

.tabulator .phone-display {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 767.98px) {
  .tabulator .tabulator-footer {
    padding: 0.75rem;
  }

  .tabulator .tabulator-footer .tabulator-paginator {
    margin-left: 0;
  }
}