/* Tabulator Table Styling */
.tabulator {
    border: 5px solid #eee; /* swapped to secondary color */
    border-radius: var(--border-radius-small);
    background-color: var(--color-white);
    font-family: var(--font-family-primary);
    box-shadow: var(--box-shadow-light);
    overflow: hidden; /* ensures rounded corners apply correctly */
    margin-bottom: 20px;
}

/* Header styling with swapped color */
.tabulator-header {
    background-color: var(--color-primary) !important; /* swapped to primary color */
    border-bottom: 2px solid #eee;
}

.tabulator-header .tabulator-col {
    background-color: var(--color-primary) !important; /* swapped to primary color */
    color: var(--color-text) !important;
    padding: 10px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important; /* thin separator */
    transition: background-color 0.3s;
}

/* Remove right border from last header column */
.tabulator-header .tabulator-col:last-child {
    border-right: none !important;
}

/* Column title styling */
.tabulator-col-title {
    font-weight: bold;
    padding: 5px 0;
}

/* Column resize handle */
.tabulator-col-resize-handle {
    width: 1px !important;
    background-color: #eee; /* match new border color */
}

/* Row styling */
.tabulator-row {
    border-bottom: 1px solid var(--color-lighter);
    transition: background-color 0.2s;
}

.tabulator-row:nth-child(even) {
    background-color: rgba(124, 163, 149, 0.05);
}

.tabulator-row:hover {
    background-color: rgba(124, 163, 149, 0.15) !important;
}

.tabulator-row.tabulator-selected {
    background-color: rgba(124, 163, 149, 0.25) !important;
}

/* Cell styling with thinner borders */
.tabulator-cell {
    padding: 8px 10px !important;
    border-right: 1px solid rgba(124, 163, 149, 0.1) !important; /* thinner separator */
}

/* Remove right border from last cell in each row */
.tabulator-row .tabulator-cell:last-child {
    border-right: none !important;
}

/* Footer styling */
.tabulator-footer {
    background-color: var(--color-lighter);
    border-top: 1px solid var(--color-secondary); /* match new border color */
    padding: 5px;
}

.tabulator-paginator {
    color: var(--color-secondary);
    font-weight: bold;
}

.tabulator-page {
    border: 1px solid var(--color-secondary); /* match new border color */
    background-color: var(--color-white);
    color: var(--color-secondary);
    border-radius: var(--border-radius-small);
    margin: 0 2px;
    padding: 2px 8px;
    transition: all 0.2s;
}

.tabulator-page:hover:not(.disabled),
.tabulator-page.active {
    background-color: var(--color-secondary); /* match new border color */
    color: var(--color-white);
}

/* Filter styling */
.tabulator-header-filter input {
    border: 1px solid var(--color-secondary); /* match new border color */
    border-radius: var(--border-radius-small);
    padding: 4px 8px;
    width: 100%;
}

.tabulator-header-filter input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(27, 87, 103, 0.25); /* match new border color */
}

/* Sort indicators */
.tabulator-col .tabulator-col-sorter {
    color: var(--color-text);
}

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

.tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-arrow {
    border-bottom-color: var(--color-yellow) !important;
}

.tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-arrow {
    border-top-color: var(--color-yellow) !important;
}

/* Loading indicator */
.tabulator-loading {
    background-color: rgba(255, 255, 255, 0.7);
}

.tabulator-loading .tabulator-loading-msg {
    background-color: var(--color-secondary); /* match new border color */
    color: var(--color-text);
    border-radius: var(--border-radius-small);
}

/* Empty message */
.tabulator-placeholder {
    background-color: rgba(124, 163, 149, 0.05);
    color: var(--color-primary);
}

/* Table hover effect */
.tabulator:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Ensure last row doesn't have a bottom border */
.tabulator-row:last-child {
    border-bottom: none;
}

/* Style for frozen columns to ensure opaque background during scroll */
.tabulator-row .tabulator-cell.frozen-column-bg {
    background-color: white !important; /* Use !important to override default Tabulator styles */
}