/* Base Tabulator */

.tabulator {
    /* Tabulator Table Cell/Row Colors */
    --tabulator-background-color-header: color-mix(in srgb, var(--background-color-primary) 86%, var(--opposite-theme-color));
    --tabulator-background-color-footer: color-mix(in srgb, var(--background-color-primary) 86%, var(--opposite-theme-color));
    --tabulator-background-color-row-odd: color-mix(in srgb, var(--background-color-primary) 93%, var(--opposite-theme-color));
    --tabulator-background-color-row-even: color-mix(in srgb, var(--background-color-primary) 90%, var(--opposite-theme-color));
    --tabulator-background-color-hover: color-mix(in srgb, var(--background-color-primary) 80%, var(--opposite-theme-color));

    border: 2px solid var(--border-color);
    border-radius: 5px;
}


/* Header Row */

.tabulator .tabulator-col-content {
    color: var(--font-color-primary);
    background-color: var(--tabulator-background-color-header);
}

.tabulator .tabulator-col-content:hover {
    background-color: var(--tabulator-background-color-hover);
}

.tabulator .tabulator-header [aria-sort="none"] .tabulator-arrow {
    border-top: none;
    border-bottom: 6px solid var(--font-color-primary) !important;
}

.tabulator .tabulator-header [aria-sort="ascending"] .tabulator-arrow {
    border-top: none;
    border-bottom: 6px solid var(--font-color-primary) !important;
}

.tabulator .tabulator-header [aria-sort="descending"] .tabulator-arrow {
    border-top: 6px solid var(--font-color-primary) !important;
    border-bottom: none;
}


/* Header Search Input */

.tabulator-header-filter input {
    height: 3vh;
    width: 100%;
    padding: var(--spacing-sm);
    color: var(--font-color-primary);
    background-color: var(--input-color);
    border: 2px solid var(--border-color);
    border-radius: var(--spacing-2xs);
    font-size: var(--spacing-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tabulator-header-filter input:focus-visible {
    border-color: var(--input-focus-color);
    outline: none;
}

/* Override browser autofill styling */
.tabulator-header-filter input:-webkit-autofill,
.tabulator-header-filter input:-webkit-autofill:hover,
.tabulator-header-filter input:-webkit-autofill:focus,
.tabulator-header-filter input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--font-color-primary);
    caret-color: var(--font-color-primary);

    -webkit-box-shadow: 0 0 0 1000px var(--input-color) inset;
    box-shadow: 0 0 0 1000px var(--input-color) inset;

    border: 2px solid var(--border-color);
}



/* Grid Rows */

.tabulator .tabulator-row {
    color: var(--font-color-primary);
}

.tabulator .tabulator-row:nth-of-type(even) {
    background-color: var(--tabulator-background-color-row-odd);
}

.tabulator .tabulator-row:nth-of-type(even):hover {
    background-color: var(--tabulator-background-color-hover);
}

.tabulator .tabulator-row:nth-of-type(odd) {
    background-color: var(--tabulator-background-color-row-even);
}

.tabulator .tabulator-row:nth-of-type(odd):hover {
    background-color: var(--tabulator-background-color-hover);
}


/* Tabulator Footer */

.tabulator .tabulator-footer {
    background-color: var(--tabulator-background-color-footer);
}


/* Cell Borders */

.tabulator .tabulator-header,
.tabulator .tabulator-col,
.tabulator .tabulator-cell,
.tabulator .tabulator-footer {
    font-size: var(--spacing-md);
}

.tabulator .tabulator-header {
    border-color: var(--border-color) !important;
}

.tabulator .tabulator-col {
    border-color: var(--border-color) !important;
}

.tabulator .tabulator-cell {
    border-color: var(--border-color) !important;
}

.tabulator .tabulator-cell .no-results {
    width: 100%;
    text-align: center;
}

.tabulator .tabulator-footer {
    border-color: var(--border-color) !important;
}


/* Pagination */

.tabulator .tabulator-page {
    height: 25px;
    color: var(--font-color-primary) !important;
    border-color: var(--border-color) !important;
    background-color: var(--background-color-primary) !important;
}

.tabulator .tabulator-page:hover {
    background-color: var(--background-color-secondary) !important;
}

.tabulator .tabulator-page.active {
    font-weight: bold;
    background-color: var(--background-color-secondary) !important;
}

.tabulator .tabulator-page:active {
    background-color: var(--tabulator-background-color-hover) !important;
}


/* Grid backdrops */

.tabulator .tabulator-header-contents {
    background-color: var(--tabulator-background-color-header);
}

.tabulator .tabulator-tableholder {
    background-color: var(--tabulator-background-color-header);
}

.tabulator .tabulator-col {
    background-color: var(--tabulator-background-color-header) !important;
}