/* Tabulator styling / ordered_list ------------------------------------------------------------ */
.ordered-list-editor {
    margin-bottom: 1rem;
    min-height: 200px; /* Minimum height, will expand as needed */
}

/* Make sure the Tabulator container has a proper height */
.ordered-list-editor .tabulator {
    height: auto; /* Auto height to display all rows */
    min-height: 400px; /* Verhoogde minimum hoogte */
    width: 100%;
    border: 1px solid var(--bs-primary); /* Primary color for border */
    border-radius: 0.375rem; /* Match application's border-radius */
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 8px rgba(118, 89, 154, 0.2); /* Match application's shadow style */
}

/* Ensure the table holder has a scrollbar */
.ordered-list-editor .tabulator-tableholder {
    /* overflow-y: auto !important; - Removed to allow Tabulator to handle overflow */
    /* max-height: calc(100% - 42px) !important; - Removed to allow Tabulator to handle height */
    /* Consider using non-!important values if specific scrolling behavior is needed */
    overflow-y: auto;
    max-height: calc(100% - 42px);
}

/* Style for the table element */
.ordered-list-editor .tabulator-table {
    display: table !important; /* Force display as table */
    width: 100% !important;
    table-layout: fixed !important; /* Use fixed table layout for consistent column widths */
}

/* Style for the handle column */
.ordered-list-editor .tabulator-row-handle {
    cursor: move;
    background-color: var(--bs-light, #f8f9fa);
    border-right: 1px solid var(--bs-gray-300, #dee2e6);
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover effect for handle column */
.ordered-list-editor .tabulator-row:hover .tabulator-row-handle {
    background-color: var(--bs-secondary); /* Secondary color on hover */
}

/* Style for the handle bars to make them more visible */
.ordered-list-editor .tabulator-row-handle-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.ordered-list-editor .tabulator-row-handle-bar {
    background: var(--bs-primary); /* Primary color for handle bars */
    display: inline-block;
    width: 10px;
    height: 2px;
    margin: 1px 0;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Change handle bar color on hover */
.ordered-list-editor .tabulator-row:hover .tabulator-row-handle-bar {
    background: #ffffff; /* White handle bars on hover */
}

/* Style for the delete button */
.ordered-list-editor .tabulator-cell button.btn-danger {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Style for boolean columns */
.ordered-list-editor .tabulator-cell[data-type="boolean"] {
    text-align: center;
}

/* Style for boolean cell icons */
.ordered-list-editor .tabulator-cell .material-icons {
    font-size: 1.2rem;
    vertical-align: middle;
}

/* Style for true/checked icons */
.ordered-list-editor .tabulator-cell[aria-checked="true"] .material-icons {
    color: var(--bs-primary); /* Primary color for checked state */
}

/* Style for false/unchecked icons */
.ordered-list-editor .tabulator-cell[aria-checked="false"] .material-icons {
    color: var(--bs-danger); /* Danger color for unchecked state */
}

/* Style for the table header */
.ordered-list-editor .tabulator-header {
    background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%); /* Match JSE gradient */
    border-bottom: 2px solid var(--bs-secondary); /* Secondary color for border */
    color: #ffffff; /* White text for better contrast on gradient */
}

/* Style for the headers container */
.ordered-list-editor .tabulator-headers {
    display: table-row !important; /* Force display as table row */
}

/* Style for the header cells */
.ordered-list-editor .tabulator-col {
    background: transparent; /* Let the header gradient show through */
    padding: 8px;
    font-weight: bold;
    text-align: center;
    display: table-cell !important; /* Force display as table cell */
    box-sizing: border-box !important; /* Include padding in width calculation */
    position: relative !important; /* Ensure proper positioning */
    color: #ffffff; /* White text for better contrast on gradient */
}

/* Override any inline styles that might hide column headers */
.ordered-list-editor .tabulator-col[style*="display: none"] {
    display: table-cell !important; /* Force display as table cell */
}

/* Ensure header cells have the same width as their corresponding data cells */
.ordered-list-editor .tabulator-col,
.ordered-list-editor .tabulator-cell
{
}

/* Style for the header cell content */
.ordered-list-editor .tabulator-col-title {
    white-space: normal; /* Allow header text to wrap */
    word-break: break-word; /* Break words to prevent horizontal overflow */
    font-weight: bold;
    font-size: 0.85rem; /* Kleinere font grootte, dezelfde als in de rijen */
    color: #ffffff; /* White text for better contrast on gradient */
}

/* Style for the table rows */
.ordered-list-editor .tabulator-row {
    border-bottom: 1px solid var(--bs-gray-300, #dee2e6); /* Match application's row border color */
    display: table-row !important; /* Force display as table row */
}

/* Hover effect for rows */
.ordered-list-editor .tabulator-row:hover {
    background-color: var(--bs-secondary) !important; /* Secondary color on hover */
    color: #ffffff !important; /* White text on hover */
}

/* Ensure all text in hovered rows changes to white */
.ordered-list-editor .tabulator-row:hover .tabulator-cell,
.ordered-list-editor .tabulator-row:hover .tabulator-cell * {
    color: #ffffff !important; /* White text for all elements in hovered rows */
}

/* Style for even rows */
.ordered-list-editor .tabulator-row-even {
    background-color: #f8f9fa; /* Light gray for even rows */
}

/* Style for odd rows */
.ordered-list-editor .tabulator-row-odd {
    background-color: #ffffff; /* White for odd rows */
}

/* Style for selected rows */
.ordered-list-editor .tabulator-row.tabulator-selected {
    background-color: var(--bs-primary) !important; /* Primary color for selected rows */
    color: #ffffff !important; /* White text for contrast */
}

/* Style for row being moved */
.ordered-list-editor .tabulator-row.tabulator-moving {
    background-color: var(--bs-primary) !important; /* Primary color for moving rows */
    color: #ffffff !important; /* White text for contrast */
    border: 2px dashed var(--bs-secondary) !important; /* Dashed border to indicate movement */
    opacity: 0.9 !important; /* Slightly transparent to distinguish from other rows */
    box-shadow: 0 0 10px rgba(118, 89, 154, 0.5) !important; /* Shadow for depth */
    z-index: 100 !important; /* Ensure it appears above other rows */
    pointer-events: none !important; /* Allow events to pass through to elements below */
    transform: scale(1.02) !important; /* Slightly larger to stand out */
    transition: transform 0.2s ease !important; /* Smooth transition */
}

/* Style for cells in the row being moved */
.ordered-list-editor .tabulator-row.tabulator-moving .tabulator-cell {
    color: #ffffff !important; /* Ensure text is white for contrast */
    background-color: transparent !important; /* Use the row's background color */
    border-color: transparent !important; /* Hide cell borders */
    display: table-cell !important; /* Ensure cells are visible */
    overflow: visible !important; /* Show all content */
}

/* Style for the moving element (the ghost row that follows the cursor) */
.tabulator-moving-element {
    background-color: var(--bs-primary) !important; /* Primary color for moving element */
    color: #ffffff !important; /* White text for contrast */
    border: 2px dashed var(--bs-secondary) !important; /* Dashed border to indicate movement */
    opacity: 0.9 !important; /* Slightly transparent */
    box-shadow: 0 0 15px rgba(118, 89, 154, 0.7) !important; /* Stronger shadow for better visibility */
    border-radius: 0.375rem !important; /* Rounded corners */
    overflow: visible !important; /* Show all content */
    width: auto !important; /* Allow width to adjust to content */
    max-width: none !important; /* Don't limit width */
    pointer-events: none !important; /* Allow events to pass through */
    display: table !important; /* Ensure it's displayed as a table */
    table-layout: fixed !important; /* Fixed table layout for consistent cell widths */
}

/* Style for cells in the moving element */
.tabulator-moving-element .tabulator-cell,
.tabulator-moving-element .tabulator-row .tabulator-cell {
    color: #ffffff !important; /* White text for contrast */
    background-color: transparent !important; /* Use the row's background color */
    border-color: transparent !important; /* Hide cell borders */
    display: table-cell !important; /* Ensure cells are visible */
    overflow: visible !important; /* Show all content */
    padding: 8px !important; /* Consistent padding */
    white-space: normal !important; /* Allow text to wrap */
    word-break: break-word !important; /* Break words to prevent overflow */
    font-size: 0.85rem !important; /* Consistent font size */
    vertical-align: middle !important; /* Center content vertically */
}

/* Style for the active moving element */
.tabulator-moving-element-active {
    opacity: 1 !important; /* Fully opaque when active */
    transform: scale(1.05) !important; /* Slightly larger when active */
    box-shadow: 0 0 20px rgba(118, 89, 154, 0.8) !important; /* Stronger shadow when active */
    z-index: 1000 !important; /* Higher z-index to ensure it's on top */
}

/* Style for the table cells */
.ordered-list-editor .tabulator-cell {
    padding: 8px;
    white-space: normal; /* Allow text to wrap */
    overflow: visible; /* Show overflowing content */
    height: auto !important; /* Allow cell to grow as needed */
    word-break: break-word; /* Break words to prevent horizontal overflow */
    display: table-cell !important; /* Force display as table cell */
    scroll-margin-top: 100px; /* Prevent unwanted scrolling when focusing */
    scroll-behavior: auto; /* Disable smooth scrolling which might cause jumping */
    font-size: 0.85rem; /* Smaller font size */
}

/* Style for truncated cells */
.ordered-list-editor .truncated-cell {
    position: relative;
    padding-right: 20px;
}

.ordered-list-editor .truncated-content {
    white-space: normal;
    word-break: break-word;
}

.ordered-list-editor .show-more {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-primary); /* Use primary color for the show more indicator */
    cursor: pointer;
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

.ordered-list-editor .show-more:hover {
    color: var(--bs-secondary); /* Use secondary color on hover */
}

/* Style for the visible cells */
.ordered-list-editor .tabulator-cell-visible {
    display: table-cell !important; /* Force display as table cell */
}

/* Override any inline styles that might hide cells */
.ordered-list-editor .tabulator-cell[style*="display: none"] {
    display: table-cell !important; /* Force display as table cell */
}

/* Style for the textarea editor */
.ordered-list-editor .tabulator-cell textarea {
    min-height: 60px;
    resize: vertical;
    width: 100%; /* Ensure textarea fills the cell */
    border: 1px solid var(--bs-gray-300, #dee2e6); /* Match application's input border */
    border-radius: 0.375rem; /* Match application's border-radius */
    padding: 0.625rem 0.75rem; /* Match application's input padding */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus effect */
}

/* Focus state for textarea */
.ordered-list-editor .tabulator-cell textarea:focus {
    border-color: var(--bs-primary); /* Primary color for focus state */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(118, 89, 154, 0.25); /* Subtle glow with primary color */
}

/* Style for the placeholder */
.ordered-list-editor .tabulator-placeholder {
    padding: 20px;
    text-align: center;
    color: var(--bs-secondary); /* Secondary color for placeholder text */
    font-style: italic;
    background-color: var(--bs-light, #f8f9fa); /* Light background for placeholder */
    border-radius: 0.375rem; /* Match application's border-radius */
    margin: 10px;
    border: 1px dashed var(--bs-gray-300, #dee2e6); /* Dashed border for empty state */
}

/* Style for the Add Row button */
.ordered-list-editor + .btn-primary {
    margin-top: 0.5rem;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #ffffff !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Hover effect for primary button */
.ordered-list-editor + .btn-primary:hover {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
}

/* Style for the Expand button */
.ordered-list-editor + .btn-primary + .btn-secondary {
    margin-top: 0.5rem;
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: #ffffff !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Hover effect for secondary button */
.ordered-list-editor + .btn-primary + .btn-secondary:hover {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Fullscreen mode styles */
.ordered-list-editor.fullscreen-mode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: var(--bs-light, #f8f9fa); /* Use light background color */
    padding: 20px;
    margin: 0;
    overflow: auto;
    box-sizing: border-box;
    border: 2px solid var(--bs-primary); /* Primary color border */
    box-shadow: 0 0 20px rgba(118, 89, 154, 0.3); /* Larger shadow for modal effect */
}

.ordered-list-editor.fullscreen-mode .tabulator {
    height: calc(100vh - 100px) !important;
    width: 100% !important;
    border: 1px solid var(--bs-primary); /* Consistent border */
    box-shadow: 0 4px 8px rgba(118, 89, 154, 0.2); /* Consistent shadow */
}

/* Tekst in invoervelden zwart maken voor betere leesbaarheid */
.ordered-list-editor .tabulator-row:hover .tabulator-cell input,
.ordered-list-editor .tabulator-row:hover .tabulator-cell select,
.ordered-list-editor .tabulator-row:hover .tabulator-cell textarea,
.ordered-list-editor .tabulator-row:hover .tabulator-cell .tabulator-editor,
.ordered-list-editor .tabulator-row.tabulator-selected .tabulator-cell input,
.ordered-list-editor .tabulator-row.tabulator-selected .tabulator-cell select,
.ordered-list-editor .tabulator-row.tabulator-selected .tabulator-cell textarea,
.ordered-list-editor .tabulator-row.tabulator-selected .tabulator-cell .tabulator-editor {
    color: #000000 !important; /* Zwarte tekst op witte achtergrond */
    background-color: #ffffff !important; /* Witte achtergrond verzekeren */
    border: 1px solid var(--bs-primary) !important; /* Duidelijke rand toevoegen */
}

.tabulator-container {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}
/* Extra specifieke override stijlen voor tabulator paginator en footer */
.tabulator .tabulator-footer .tabulator-paginator {
    background: transparent !important; /* Transparante achtergrond, want de footer heeft al gradient */
    border-top: none !important;
    padding: 0 !important;
}

.tabulator .tabulator-footer .tabulator-page {
    font-family: inherit !important;
    font-weight: normal !important;
    font-size: 0.85rem !important;
}

.tabulator .tabulator-footer .tabulator-page.active {
    font-weight: bold !important;
    z-index: 1 !important;
}

.tabulator .tabulator-footer .tabulator-paginator .tabulator-page-size {
    margin-left: 5px !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    border: 1px solid white !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    font-size: 0.85rem !important;
    font-family: inherit !important;
}

/* Styling voor de paginator container */
.tabulator .tabulator-footer .tabulator-paginator label {
    color: white !important; /* Witte tekst voor betere leesbaarheid op donkere gradient */
    font-size: 0.85rem !important;
    font-weight: normal !important;
    margin: 0 5px !important;
}

/* Override specifiek voor .tabulator-page.active */
.tabulator .tabulator-footer .tabulator-paginator .tabulator-pages .tabulator-page.active {
    background-color: var(--bs-primary) !important;
    color: white !important;
    border-color: var(--bs-primary) !important;
    font-weight: bold !important;
}
/* Styling voor buttons in de tabulator paginator */
.tabulator-footer button,
.tabulator .tabulator-footer .tabulator-page {
    margin: 0 2px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border: 1px solid white !important;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.tabulator-footer button:hover,
.tabulator .tabulator-footer .tabulator-page:hover {
    background-color: var(--bs-secondary) !important;
    color: white !important;
    border-color: var(--bs-secondary) !important;
}

.tabulator-footer button.tabulator-page.active,
.tabulator .tabulator-footer .tabulator-page.active {
    background-color: var(--bs-primary) !important;
    color: white !important;
    border-color: var(--bs-primary) !important;
    font-weight: bold;
}

.tabulator-footer button:disabled,
.tabulator .tabulator-footer .tabulator-page:disabled,
.tabulator .tabulator-footer .tabulator-page.disabled {
    color: var(--bs-gray-500) !important;
    background-color: var(--bs-gray-200) !important;
    border-color: var(--bs-gray-300) !important;
    cursor: not-allowed;
}
/* Styling voor de tabulator paginator -------------------------------------------------------------- */
.tabulator-paginator {
        background: linear-gradient(90deg, var(--bs-secondary) 0%, var(--bs-primary) 100%) !important; /* Omgekeerde gradient van de header */
    padding: 10px;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-top: 1px solid var(--bs-secondary);
}

.tabulator-paginator .tabulator-page {
    margin: 0 2px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: var(--bs-light);
    color: var(--bs-primary);
    border: 1px solid var(--bs-secondary);
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.tabulator-paginator .tabulator-page:hover {
    background-color: var(--bs-secondary);
    color: white;
}

.tabulator-paginator .tabulator-page.active,
.tabulator .tabulator-footer .tabulator-page.active {
    background-color: var(--bs-primary) !important;
    color: white !important;
    border-color: var(--bs-primary) !important;
}

.tabulator-paginator .tabulator-page:disabled,
.tabulator-paginator .tabulator-page.disabled {
    color: var(--bs-gray-500);
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-300);
    cursor: not-allowed;
}

.tabulator-paginator .tabulator-page-size {
    margin-left: 5px;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid var(--bs-secondary);
    background-color: var(--bs-light);
    color: var(--bs-primary);
    font-size: 0.85rem;
}

.tabulator-footer,
.tabulator .tabulator-footer {
    background: linear-gradient(90deg, var(--bs-secondary) 0%, var(--bs-primary) 100%) !important; /* Omgekeerde gradient van de header */
    border-top: 1px solid var(--bs-secondary) !important;
    border-bottom-left-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
    padding: 8px !important;
}
.filter-controls .filter-row {
    align-items: center;
}

.tabulator .tabulator-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.tabulator .tabulator-row.tabulator-selected {
    background-color: #e3f2fd !important;
    border-left: 3px solid #007bff !important;
    font-weight: 500;
}

.tabulator .tabulator-row:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

/* Visuele indicator dat de rij klikbaar is */
.tabulator .tabulator-row {
    transition: background-color 0.2s ease;
}

/* Algemene tabulator header stijlen -------------------------------------------------------------- */
.tabulator .tabulator-header {
    background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%);
    border-bottom: 2px solid var(--bs-secondary);
    color: #ffffff;
}

/* Voorkom grijze achtergrond bij hover over header elementen */
.tabulator-header .tabulator-col:hover,
.tabulator-header .tabulator-col-row:hover,
.tabulator-header .tabulator-col-group:hover {
    background: transparent !important; /* Behoudt de transparante achtergrond bij hover */
}

.tabulator .tabulator-header .tabulator-col {
    background: transparent;
    border-right: none;
    box-sizing: border-box;
    text-align: left;
    vertical-align: bottom;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

/* Voorkom grijze achtergrond bij hover over kolomkoppen */
.tabulator-col:hover {
    background: transparent !important; /* Behoud dezelfde achtergrond bij hover */
}

.tabulator .tabulator-header .tabulator-col-title {
    color: #ffffff;
    font-weight: bold;
}

.tabulator .tabulator-header .tabulator-col-sorter {
    color: #ffffff;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    color: #ffffff;
    font-size: 0.85rem; /* Kleinere font grootte, dezelfde als in de rijen */
}

.tabulator .tabulator-header .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-header-filter select {
    border: 1px solid var(--bs-secondary);
    background-color: rgba(255, 255, 255, 0.9);
    color: #000000;
}

/* Tabulator List View stijlen ---------------------------------------------------------------------- */
.tabulator-list-view {
    margin-bottom: 1rem;
    min-height: 400px; /* Verhoogde minimum hoogte voor meer verticale ruimte */
}

/* Tabulator List View paginator stijlen */
.tabulator-list-view .tabulator-footer {
    background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%); /* Match EveAI gradient */
    padding: 8px;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-top: 1px solid var(--bs-secondary);
}

/* Maximale specifieke selector voor active pagination knoppen */
.tabulator-list-view .tabulator-footer .tabulator-paginator .tabulator-pages .tabulator-page.active {
    background-color: var(--bs-primary) !important;
    color: white !important;
    border-color: var(--bs-primary) !important;
    font-weight: bold !important;
}

/* Zorg ervoor dat de Tabulator container een goede hoogte heeft */
.tabulator-list-view .tabulator {
    height: auto; /* Auto hoogte om alle rijen weer te geven */
    min-height: 500px; /* Verhoogde minimum hoogte */
    width: 100%;
    border: 1px solid var(--bs-primary); /* Primaire kleur voor rand */
    border-radius: 0.375rem; /* Afstemmen op border-radius van applicatie */
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 8px rgba(118, 89, 154, 0.2); /* Afstemmen op schaduw stijl van applicatie */
}

/* Stijl voor de tabel header */
.tabulator-list-view .tabulator-header {
    background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%); /* Match EveAI gradient */
    border-bottom: 2px solid var(--bs-secondary); /* Secundaire kleur voor rand */
    color: #ffffff; /* Witte tekst voor beter contrast op gradient */
}

/* Stijl voor de header cellen */
.tabulator-list-view .tabulator-col {
    background: transparent; /* Laat de header gradient doorschijnen */
    padding: 8px;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box !important; /* Padding meenemen in breedte berekening */
    position: relative !important; /* Juiste positionering verzekeren */
    color: #ffffff; /* Witte tekst voor beter contrast op gradient */
}

/* Voorkom kleurverandering bij hover over kolomkoppen */
.tabulator .tabulator-header .tabulator-col:hover {
    background: transparent !important; /* Behoud transparante achtergrond bij hover */
}

/* Stijl voor de inhoud van header cellen */
.tabulator-list-view .tabulator-col-title {
    white-space: normal; /* Sta toe dat header tekst omwikkelt */
    word-break: break-word; /* Breek woorden om horizontale overflow te voorkomen */
    font-weight: bold;
    font-size: 0.85rem; /* Kleinere font grootte, dezelfde als in de rijen */
    color: #ffffff; /* Witte tekst voor beter contrast op gradient */
}

/* Stijl voor de tabel rijen */
.tabulator-list-view .tabulator-row {
    border-bottom: 1px solid var(--bs-gray-300, #dee2e6); /* Match rij rand kleur van applicatie */
    font-size: 0.85rem; /* Kleinere font grootte zoals gevraagd */
}

/* Hover effect voor rijen */
.tabulator-list-view .tabulator-row:hover {
    background-color: var(--bs-secondary) !important; /* Secundaire kleur bij hover */
    color: #ffffff !important; /* Witte tekst bij hover */
    cursor: pointer;
}

/* Zorg ervoor dat alle tekst in rijen bij hover wit wordt */
.tabulator-list-view .tabulator-row:hover .tabulator-cell,
.tabulator-list-view .tabulator-row:hover .tabulator-cell * {
    color: #ffffff !important; /* Witte tekst voor alle elementen in rijen bij hover */
}

/* Stijl voor even rijen */
.tabulator-list-view .tabulator-row-even {
    background-color: #f8f9fa; /* Lichtgrijs voor even rijen */
}

/* Stijl voor oneven rijen */
.tabulator-list-view .tabulator-row-odd {
    background-color: #ffffff; /* Wit voor oneven rijen */
}

/* Stijl voor geselecteerde rijen */
.tabulator-list-view .tabulator-row.tabulator-selected {
    background-color: var(--bs-primary) !important; /* Primaire kleur voor geselecteerde rijen */
    color: #ffffff !important; /* Witte tekst voor contrast */
    border: none !important; /* Geen lijn voor geselecteerde rij, alleen kleur */
}

/* Stijl voor de tabel cellen */
.tabulator-list-view .tabulator-cell {
    padding: 8px;
    white-space: normal; /* Sta toe dat tekst omwikkelt */
    overflow: visible; /* Toon overlopende inhoud */
    height: auto !important; /* Sta toe dat cel groeit indien nodig */
    word-break: break-word; /* Breek woorden om horizontale overflow te voorkomen */
    font-size: 0.85rem; /* Kleinere font grootte */
}

/* Tekst in invoervelden zwart maken voor betere leesbaarheid bij hover/selectie */
.tabulator-list-view .tabulator-row:hover .tabulator-cell input,
.tabulator-list-view .tabulator-row:hover .tabulator-cell select,
.tabulator-list-view .tabulator-row:hover .tabulator-cell textarea,
.tabulator-list-view .tabulator-row.tabulator-selected .tabulator-cell input,
.tabulator-list-view .tabulator-row.tabulator-selected .tabulator-cell select,
.tabulator-list-view .tabulator-row.tabulator-selected .tabulator-cell textarea {
    color: #000000 !important; /* Zwarte tekst op witte achtergrond */
    background-color: #ffffff !important; /* Witte achtergrond verzekeren */
    border: 1px solid var(--bs-primary) !important; /* Duidelijke rand toevoegen */
}