/* Tabulator Table Styling - Match existing table design */

/* Base table styling */
.tabulator-table-wrapper {
  border: none !important;
  background: transparent !important;
}

.tabulator-table-wrapper .tabulator {
  border: none !important;
  background: transparent !important;
}

.tabulator-table-wrapper .tabulator-header {
  border-bottom: none !important;
  background: white !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col {
  border-right: 1px solid #e5e7eb !important;
  border-top: 1px solid #e5e7eb !important;
  background: white !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 0.75rem 1.5rem !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  color: #6b7280 !important;
  letter-spacing: 0.05em !important;
  text-align: left !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col.tabulator-sortable:hover {
  background: #f9fafb !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {
  border-top: 1px solid #e5e7eb !important;
}

/* Date range input styling - prevent green background */
/* Nuclear option - override all possible states */
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input[type="date"],
.tabulator-header-filter input[type="date"] {
  background-color: white !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input[type="date"]:hover,
.tabulator-header-filter input[type="date"]:hover {
  background-color: white !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input[type="date"]:focus,
.tabulator-header-filter input[type="date"]:focus {
  background-color: white !important;
  border-color: var(--color-accent) !important;
  outline: none !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input[type="date"]:active,
.tabulator-header-filter input[type="date"]:active {
  background-color: white !important;
}

/* Span container - all states */
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter span,
.tabulator-header-filter span {
  background-color: transparent !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter span:hover,
.tabulator-header-filter span:hover {
  background-color: transparent !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter span:focus,
.tabulator-header-filter span:focus {
  background-color: transparent !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter span:focus-within,
.tabulator-header-filter span:focus-within {
  background-color: transparent !important;
}

/* Header filter container - all states */
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter,
.tabulator-header-filter {
  background-color: transparent !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter:hover,
.tabulator-header-filter:hover {
  background-color: transparent !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter:focus-within,
.tabulator-header-filter:focus-within {
  background-color: transparent !important;
}

.tabulator-table-wrapper .tabulator-body {
  background: white !important;
}

.tabulator-table-wrapper .tabulator-row {
  border-bottom: 1px solid #e5e7eb !important;
  background: white !important;
}

.tabulator-table-wrapper .tabulator-row:hover {
  background: #f9fafb !important;
}

.tabulator-table-wrapper .tabulator-row .tabulator-cell {
  border-right: 1px solid #e5e7eb !important;
  padding: 1rem 1.5rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  font-size: 0.875rem !important;
  color: #111827 !important;
}

.tabulator-table-wrapper .tabulator-row .tabulator-cell a {
  color: var(--color-accent) !important;
  text-decoration: none !important;
}

.tabulator-table-wrapper .tabulator-row .tabulator-cell a:hover {
  text-decoration: underline !important;
}

/* Pagination styling */
.tabulator-table-wrapper .tabulator-footer {
  border-top: 1px solid #e5e7eb !important;
  background: white !important;
  padding: 0.75rem 1.5rem !important;
}

.tabulator-table-wrapper .tabulator-footer .tabulator-paginator {
  color: #6b7280 !important;
  font-size: 0.875rem !important;
}

/* Hide first and last page buttons */
.tabulator-table-wrapper .tabulator-footer .tabulator-page[data-page="first"],
.tabulator-table-wrapper .tabulator-footer .tabulator-page[data-page="last"] {
  display: none !important;
}

/* Style prev/next buttons with chevron arrows (like select inputs) and no border */
.tabulator-table-wrapper .tabulator-footer .tabulator-page[data-page="prev"],
.tabulator-table-wrapper .tabulator-footer .tabulator-page[data-page="next"] {
  font-size: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 12px 12px !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tabulator-table-wrapper .tabulator-footer .tabulator-page[data-page="prev"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M8 1l-5 5 5 5' stroke='%237bb877' fill='none' stroke-width='2'/%3E%3C/svg%3E") !important;
}

.tabulator-table-wrapper .tabulator-footer .tabulator-page[data-page="next"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M4 1l5 5-5 5' stroke='%237bb877' fill='none' stroke-width='2'/%3E%3C/svg%3E") !important;
}

.tabulator-table-wrapper .tabulator-footer .tabulator-page[data-page="prev"]:hover,
.tabulator-table-wrapper .tabulator-footer .tabulator-page[data-page="next"]:hover {
  background-color: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

/* Pagination buttons styling */
.tabulator-table-wrapper .tabulator-footer .tabulator-page {
  margin: 0 2px !important;
  padding: 10px 16px !important;
  border: 1px solid white !important;
  background: white !important;
  color: var(--color-accent) !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

.tabulator-table-wrapper .tabulator-footer .tabulator-page:hover {
  background-color: var(--color-accent) !important;
  color: white !important;
  border: 1px solid var(--color-accent) !important;
  cursor: pointer !important;
}

.tabulator-table-wrapper .tabulator-footer .tabulator-page.active {
  background: var(--color-accent) !important;
  color: white !important;
  border-color: var(--color-accent) !important;
}

/* Remove margin from pages container */
.tabulator-table-wrapper .tabulator-footer .tabulator-paginator .tabulator-pages,
.tabulator .tabulator-footer .tabulator-paginator .tabulator-pages,
.tabulator-paginator .tabulator-pages {
  margin: 0 !important;
  padding: 0 !important;
}

/* Pagination size selector - match pagination button height */
.tabulator-table-wrapper .tabulator-footer .tabulator-page-size {
  width: auto !important;
  height: auto !important;
  border-radius: 0.375rem !important;
  border: 1px solid #d1d5db !important;
  background: white !important;
  padding: 10px 16px !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: #111827 !important;
  outline: none !important;
  margin-right: 0.5rem !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.tabulator-table-wrapper .tabulator-footer .tabulator-page-size:focus {
  border-color: var(--color-accent) !important;
  border-width: 2px !important;
  background-color: white !important;
  color: #111827 !important;
  outline: none !important;
  box-shadow: none !important;
}

.tabulator-table-wrapper .tabulator-footer .tabulator-page-size:hover {
  background-color: white !important;
  border: 1px solid #d1d5db !important;
  cursor: pointer !important;
}

/* Fix page size select dropdown arrow - must come after .tabulator-page-size styles */
.tabulator-table-wrapper .tabulator-footer .tabulator-page-size {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 2.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' fill='none' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 12px 8px !important;
}

/* Responsive pagination */
@media (max-width: 768px) {
  .tabulator-table-wrapper .tabulator-footer-contents {
    padding: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  /* Hide page size selector on mobile */
  .tabulator-table-wrapper .tabulator-paginator label,
  .tabulator-table-wrapper .tabulator-footer .tabulator-page-size {
    display: none !important;
  }

  /* Make paginator first row for navigation buttons */
  .tabulator-table-wrapper .tabulator-paginator {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.25rem !important;
    order: 0 !important;
  }

  /* Move page counter to be last row */
  .tabulator-table-wrapper .tabulator-footer .tabulator-page-counter,
  .tabulator-table-wrapper .tabulator-footer .tabulator-page-count,
  .tabulator-table-wrapper .tabulator-page-counter {
    order: 999 !important;
    text-align: center !important;
    font-size: 0.875rem !important;
    color: #6b7280 !important;
  }

  /* Individual navigation buttons styling */
  .tabulator-table-wrapper .tabulator-paginator button[type="button"] {
    margin: 0 !important;
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    min-width: 36px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }

  /* Page numbers container */
  .tabulator-table-wrapper .tabulator-footer .tabulator-footer-contents .tabulator-paginator .tabulator-pages {
    margin: 0 !important;
    display: inline-flex !important;
    gap: 0.125rem !important;
  }

  /* Page number buttons */
  .tabulator-table-wrapper .tabulator-paginator .tabulator-pages .tabulator-page {
    margin: 0 !important;
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    min-width: 36px !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .tabulator-table-wrapper .tabulator-paginator button[type="button"],
  .tabulator-table-wrapper .tabulator-paginator .tabulator-pages .tabulator-page {
    padding: 6px 10px !important;
    font-size: 0.7rem !important;
    min-width: 32px !important;
  }

  .tabulator-table-wrapper .tabulator-footer-contents {
    padding: 0.75rem !important;
    gap: 0.75rem !important;
  }

  /* Extra small screens - make buttons even more compact */
  .tabulator-table-wrapper .tabulator-paginator {
    gap: 0.125rem !important;
  }
}

/* Header filter styling */
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter {
  margin-top: 0.5rem !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input {
  width: 100% !important;
  padding: 0.375rem 0.5rem !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  font-size: 0.75rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  letter-spacing: normal !important;
  background: white !important;
}

/* Mobile filter improvements */
@media (max-width: 768px) {
  .tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter {
    margin-top: 0.25rem !important;
  }

  .tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input {
    padding: 0.25rem 0.375rem !important;
    font-size: 0.7rem !important;
  }

  .tabulator-header-filter .tabulator-range-filter input {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.25rem !important;
  }
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 1px var(--color-accent) !important;
}

/* Filter clear button styling - comprehensive selectors */
.tabulator-table-wrapper .tabulator-header-filter-clear,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter .tabulator-header-filter-clear,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input + span,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input + div,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input ~ .tabulator-header-filter-clear,
.tabulator-table-wrapper [class*="tabulator-header-filter-clear"],
.tabulator-table-wrapper [class*="filter-clear"],
.tabulator-table-wrapper .tabulator-header-filter::-webkit-search-cancel-button,
.tabulator-table-wrapper .tabulator-header-filter::-ms-clear,
.tabulator-table-wrapper [title*="Clear"],
.tabulator-table-wrapper [aria-label*="clear"],
.tabulator-table-wrapper [aria-label*="Clear"],
.tabulator-table-wrapper *:has(+ input:focus),
.tabulator-table-wrapper input:focus + *,
.tabulator-table-wrapper input:focus ~ *,
.tabulator-table-wrapper input:hover + *,
.tabulator-table-wrapper input:hover ~ *,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input:hover + span,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input:hover ~ button,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter button,
.tabulator-table-wrapper .tabulator-header-filter button {
  color: var(--color-accent) !important;
  background: transparent !important;
  border: none !important;
  font-size: 16px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  padding: 2px !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
  pointer-events: auto !important;
}

.tabulator-table-wrapper .tabulator-header-filter-clear:hover,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter .tabulator-header-filter-clear:hover,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input + span:hover,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input + div:hover,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input ~ .tabulator-header-filter-clear:hover,
.tabulator-table-wrapper [class*="tabulator-header-filter-clear"]:hover,
.tabulator-table-wrapper [class*="filter-clear"]:hover,
.tabulator-table-wrapper [title*="Clear"]:hover,
.tabulator-table-wrapper [aria-label*="clear"]:hover,
.tabulator-table-wrapper [aria-label*="Clear"]:hover,
.tabulator-table-wrapper input:focus + *:hover,
.tabulator-table-wrapper input:focus ~ *:hover,
.tabulator-table-wrapper input:hover + *:hover,
.tabulator-table-wrapper input:hover ~ *:hover,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input:hover + span:hover,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input:hover ~ button:hover,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter button:hover,
.tabulator-table-wrapper .tabulator-header-filter button:hover {
  background-color: var(--color-accent) !important;
  color: white !important;
  cursor: pointer !important;
}

/* Native input clear button styling - keep native behavior, just change color to accent #7bb877 */
.tabulator-table-wrapper .tabulator-header-filter input[type="search"]::-webkit-search-cancel-button,
.tabulator-table-wrapper .tabulator-header-filter input[type="text"]::-webkit-search-cancel-button {
  filter: brightness(0) saturate(100%) invert(67%) sepia(26%) saturate(540%) hue-rotate(68deg) brightness(94%) contrast(91%) !important;
}

.tabulator-table-wrapper .tabulator-header-filter input[type="search"]::-webkit-search-cancel-button:hover,
.tabulator-table-wrapper .tabulator-header-filter input[type="text"]::-webkit-search-cancel-button:hover {
  cursor: pointer !important;
}

/* Hide MS clear button */
.tabulator-table-wrapper .tabulator-header-filter input[type="text"]::-ms-clear {
  display: none !important;
}

/* Nuclear option - catch any clickable element in filter area */
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter * {
  color: var(--color-accent) !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input {
  color: #111827 !important; /* Restore input text color */
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter *:hover {
  background-color: var(--color-accent) !important;
  color: white !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input:hover {
  background-color: white !important;
  color: #111827 !important;
}

/* Ensure header filter cells and data cells have matching widths */
.tabulator-table-wrapper .tabulator-header .tabulator-col,
.tabulator-table-wrapper .tabulator-row .tabulator-cell {
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-col-content {
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Force all header filter elements to respect column width */
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter {
  overflow: visible !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter input,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter select,
.tabulator-table-wrapper .tabulator-header .tabulator-col .tabulator-header-filter .tabulator-editor {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Range filter inputs (date/number) should share column width equally */
.tabulator-header-filter .tabulator-range-filter {
  display: flex !important;
  width: 100% !important;
  overflow: visible !important;
}

.tabulator-header-filter .tabulator-range-filter input {
  width: 0 !important;
  min-width: 0 !important;
  flex: 1 1 0% !important;
  max-width: none !important;
  outline-offset: -1px !important;
}

/* Tabulator autocomplete/select dropdown styling - match navbar dropdown */
.tabulator-edit-list {
  background: white !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
  padding: 0.25rem 0 !important;
  margin-top: 2px !important;
  overflow-y: auto !important;
}

.tabulator-edit-list .tabulator-edit-list-item {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.8rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  color: #374151 !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.tabulator-edit-list .tabulator-edit-list-item:hover,
.tabulator-edit-list .tabulator-edit-list-item.active {
  background-color: var(--color-accent) !important;
  color: white !important;
}

/* Fix double border issue - remove border from last row */
.tabulator-table-wrapper .tabulator-row:last-child {
  border-bottom: none !important;
}

/* Fix header column border overlap */
.tabulator-table-wrapper .tabulator-header .tabulator-col:last-child {
  border-right: none !important;
}

/* Row selection checkbox column - remove extra bottom border */
.tabulator-table-wrapper .tabulator-row .tabulator-cell.tabulator-frozen {
  border-bottom: none !important;
}


/* Row selection checkbox column - vertically center header checkbox */
.tabulator-table-wrapper .tabulator-header .tabulator-col.tabulator-frozen .tabulator-col-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  padding: 0 !important;
}

/* Remove black focus outline on the table */
.tabulator-table-wrapper .tabulator-tableholder,
.tabulator-table-wrapper .tabulator-tableholder:focus,
.tabulator-table-wrapper .tabulator-tableholder:focus-visible,
.tabulator-table-wrapper .tabulator-tableholder .tabulator-table:focus,
.tabulator-table-wrapper .tabulator-tableholder .tabulator-table:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Selected rows - light accent background */
.tabulator-table-wrapper .tabulator-row.tabulator-selected {
  background: color-mix(in srgb, var(--color-accent) 10%, white) !important;
}

.tabulator-table-wrapper .tabulator-row.tabulator-selected:hover {
  background: color-mix(in srgb, var(--color-accent) 18%, white) !important;
}