/*
 * Restyles Tabulator's default look to match TailAdmin's Tailwind design
 * tokens (see src/index.css @theme block) since Tabulator ships its own
 * bootstrap-flavoured CSS by default. Loaded on top of the "simple" base
 * theme, which only provides structural layout (not colors/spacing).
 *
 * !important is used on background rules only: tabulator_simple.min.css sets
 * background/background-color on several nested elements (header, column,
 * tableholder table, row) at matching specificity, so a plain override only
 * wins for some of them depending on source order — !important makes every
 * one of them reliably transparent instead of leaking its white default.
 */

.tabulator {
  background-color: transparent !important;
  border: none;
  font-family: Outfit, sans-serif;
  font-size: 14px; /* text-theme-sm */
  margin-bottom: 0;
}

.tabulator .tabulator-header {
  background-color: transparent !important;
  border-bottom: 1px solid #f2f4f7; /* gray-100 */
  color: #667085; /* gray-500 */
  font-weight: 500;
}

.tabulator .tabulator-header .tabulator-col {
  background-color: transparent !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 12px 20px; /* px-5 py-3 */
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  font-size: 12px; /* text-theme-xs */
  color: #667085; /* gray-500 */
}

.tabulator .tabulator-tableholder .tabulator-table {
  background-color: transparent !important;
}

/* Header filter inputs — the base theme leaves these completely unstyled
   (plain browser input look), so style them to match TailAdmin's own
   src/components/form/input/InputField.tsx tokens. */
.tabulator-header-filter input,
.tabulator-header-filter select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d0d5dd; /* gray-300 */
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px; /* text-theme-xs */
  font-family: Outfit, sans-serif;
  color: #344054; /* gray-700 */
  background-color: #ffffff;
}

.tabulator-header-filter input::placeholder {
  color: #98a2b3; /* gray-400 */
}

.tabulator-header-filter input:focus,
.tabulator-header-filter select:focus {
  outline: none;
  border-color: #465fff; /* brand-500 */
}

.tabulator-row,
.tabulator-row.tabulator-row-even {
  background-color: transparent !important;
  border-bottom: 1px solid #f2f4f7; /* gray-100 */
}

.tabulator-row .tabulator-cell {
  padding: 16px 20px; /* px-5 py-4 */
  font-size: 14px; /* text-theme-sm */
  color: #667085; /* gray-500 */
  border-right: none;
}

/* Tabulator's built-in footer is fully replaced by a custom-built one in
   SscUserTable.tsx (driven by the public pagination API/events) so the
   page-size selector and nav buttons can be laid out and styled freely —
   the built-in footer bundles them into one DOM group with no way to
   separate them via CSS (confirmed via DevTools). Keep it in the DOM
   (pagination: true still needs it internally) but hidden. */
.tabulator .tabulator-footer {
  display: none !important;
}

/* Range-selection highlight in the brand color instead of Tabulator's default blue */
.tabulator
  .tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(
    .tabulator-range-selected-cursor
  ) {
  background-color: rgba(70, 95, 255, 0.1) !important; /* brand-500 @ 10% */
}

/* Two separate pointer-events:none overlay elements both draw an unconditional
   border in tabulator_simple.min.css: .tabulator-range-cell-active (the active
   cell cursor, confirmed hidden via getComputedStyle in DevTools) and
   .tabulator-range (the selected-range rectangle itself — this is the one
   still showing, since it was never targeted before). Hide both by default,
   only reveal while the container has "range-active" (added on real
   mousedown by SscUserTable.tsx, removed after copy). */
.tabulator-range-overlay .tabulator-range-cell-active,
.tabulator-range-overlay .tabulator-range {
  display: none !important;
}

.range-active .tabulator-range-overlay .tabulator-range-cell-active,
.range-active .tabulator-range-overlay .tabulator-range {
  display: block !important;
  border-color: #465fff; /* brand-500 */
}

/* Dark mode (TailAdmin toggles a `dark` class on <html>) */
.dark .tabulator {
  color: #ffffff;
}

.dark .tabulator .tabulator-header {
  border-bottom-color: rgba(255, 255, 255, 0.05);
  color: #9ca3af; /* gray-400 */
}

.dark .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  color: #9ca3af;
}

.dark .tabulator-row,
.dark .tabulator-row.tabulator-row-even {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.dark .tabulator-row .tabulator-cell {
  color: #9ca3af;
}

.dark .tabulator-header-filter input,
.dark .tabulator-header-filter select {
  border-color: rgba(255, 255, 255, 0.1);
  background-color: #101828; /* gray-900 */
  color: rgba(255, 255, 255, 0.9);
}

.dark .tabulator-header-filter input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}