/* --------------------------------------------------
   Tabulator bridge to existing QSTRAIL table design
   -------------------------------------------------- */

.futureevents-table-search {
  max-width: 28rem;
  margin: 1rem 0;
}

.futureevents-table-search label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.futureevents-table-search input {
  width: 100%;
}

.event-resources {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.event-resource {
  display: inline-flex;
  padding: 0.25rem;
  border: 1px solid transparent;
  border-radius: 6px;
}

.event-resources svg {
  width: 20px;
  height: 20px;
  fill: var(--color-accent);
}

.tabulator {
  width: 100%;
  border: none;
  background: var(--color-primary);
  color: var(--color-secondary-darker);
  font-family: Geist, sans-serif;
  font-size: 1rem;
}

/* Header */
.tabulator .tabulator-header {
  background: var(--color-primary);
  border: none;
  box-shadow: 0 6px 5px -6px var(--color-primary-dark);
  color: var(--color-secondary);
}

.tabulator .tabulator-header .tabulator-col {
  background: var(--color-primary);
  border-right: none;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 17px 14px 15px;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  font-size: 0.875rem;
  color: var(--color-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Rows */
.tabulator .tabulator-tableholder .tabulator-table {
  background: var(--color-primary);
}

.tabulator .tabulator-row {
  background: var(--color-primary);
  color: var(--color-secondary-darker);
  border-bottom: none;
  min-height: auto;
  cursor: pointer;
}

/* Your old table had odd rows highlighted */
.tabulator .tabulator-row:nth-child(odd) {
  background: var(--color-primary-lighter);
  color: rgb(165.3324873096, 173.1675126904, 171.4263959391);
}

/* The dark-theme odd-row color is too pale against light backgrounds. */
.light .tabulator .tabulator-row:nth-child(odd) {
  color: var(--color-secondary-darker);
}

.tabulator .tabulator-row:nth-child(even) {
  background: var(--color-primary);
  color: var(--color-secondary-darker);
}

/* Cells */
.tabulator .tabulator-row .tabulator-cell {
  padding: 10px 14px;
  border-right: none;
  font-weight: 300;
  color: inherit;
  vertical-align: middle;
}

/* Hover */
.tabulator .tabulator-row:hover {
  background: var(--color-secondary-dark);
}

/* Keep links and your badge/icon design */
.tabulator .tabulator-cell a {
  color: var(--color-accent);
}

.tabulator .tabulator-cell .badge {
  color: var(--color-accent);
}

.tabulator .tabulator-cell .badge svg {
  fill: var(--color-accent);
}

/* Header sort arrow */
.tabulator
  .tabulator-header
  .tabulator-col.tabulator-sortable
  .tabulator-col-content
  .tabulator-col-sorter {
  color: var(--color-secondary-darker);
}

/* Header filters */
.tabulator .tabulator-header .tabulator-header-filter {
  margin-top: 7px;
}

.tabulator .tabulator-header .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-header-filter select {
  width: 100%;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 0.875rem;

  color: var(--color-accent);
  background: var(--color-accent-dark);

  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
}

.tabulator .tabulator-header .tabulator-header-filter input:hover,
.tabulator .tabulator-header .tabulator-header-filter input:focus,
.tabulator .tabulator-header .tabulator-header-filter select:hover,
.tabulator .tabulator-header .tabulator-header-filter select:focus {
  border-color: var(--color-accent);
}

/* Footer / pagination, for later */
.tabulator .tabulator-footer {
  background: var(--color-primary);
  color: var(--color-secondary);
  border: none;
  border-top: 1px solid var(--color-primary-lighter);
}

.tabulator .tabulator-footer .tabulator-page {
  background: var(--color-accent-dark);
  color: var(--color-accent);
  border: 1px solid transparent;
  border-radius: 6px;
}

.tabulator .tabulator-footer .tabulator-page:hover {
  border-color: var(--color-accent);
}

.tabulator .tabulator-footer .tabulator-page.active {
  background: var(--color-accent);
  color: var(--color-primary-dark);
}

/* Never highlight any part of a Tabulator header on hover */
.tabulator .tabulator-header .tabulator-col:hover,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover,
.tabulator .tabulator-header .tabulator-col:hover .tabulator-col-content,
.tabulator .tabulator-header .tabulator-col:hover .tabulator-col-title-holder,
.tabulator .tabulator-header .tabulator-col:hover .tabulator-col-title,
.tabulator .tabulator-header .tabulator-col:hover .tabulator-col-sorter {
  background: var(--color-primary) !important;
}

.tracking-rank-cell {
  white-space: nowrap;
}

.tracking-rank-delta {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: super;
}

.tracking-rank-delta--up {
  color: #16a34a;
}

.tracking-rank-delta--down {
  color: #dc2626;
}

.tabulator .tabulator-col.tabulator-moving {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.tabulator .tabulator-col.tabulator-moving .tabulator-col-content {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.tabulator .tabulator-col.tabulator-moving::after,
.tabulator .tabulator-col.tabulator-moving::before {
  display: none !important;
}