/**
 * Radzen DataGrid Dark Mode Fixes
 * Addresses issues with sorting and grid functionality in dark mode
 */

/* Fix dark mode grid headers to ensure they're clickable and properly styled */
.dark-mode-grid .rz-datatable-header,
.dark-mode-grid .rz-grid-table .rz-grid-header-content {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #333333 !important;
    cursor: pointer;
}

/* Ensure sort icons are visible in dark mode */
.dark-mode-grid .rz-sortable-column .rz-column-title,
.dark-mode-grid .rz-sortable-column .rz-sort-icon {
    color: #ffffff !important;
}

/* Highlight sortable columns on hover */
.dark-mode-grid .rz-sortable-column:hover {
    background-color: #2d2d2d !important;
    cursor: pointer !important;
}

/* Style for the active sort column */
.dark-mode-grid .rz-state-active {
    background-color: #2d2d2d !important;
}

/* Make sort icons more visible */
.dark-mode-grid .rz-sort-icon {
    opacity: 0.8 !important;
}

/* Ensure the pointer cursor appears on sortable columns */
.dark-mode-grid .rz-sortable-column {
    cursor: pointer !important;
    user-select: none;
}

/* Ensure grid rows have proper contrast */
.dark-mode-grid .rz-datatable-data td {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Style for alternating rows */
.dark-mode-grid .rz-datatable-data tr:nth-child(even) td {
    background-color: #252525 !important;
}

/* Hover effect for rows */
.dark-mode-grid .rz-datatable-data tr:hover td {
    background-color: #333333 !important;
}

/* Fix button styling in grid */
.dark-mode-grid .rz-button {
    background-color: #1976d2 !important;
    color: #ffffff !important;
}

.dark-mode-grid .rz-button:hover {
    background-color: #1565c0 !important;
}

/* Fix specifically for RadzenDataGrid */
.dark-mode-grid.document-vault-grid .rz-grid-table thead th,
.dark-mode-grid.document-vault-grid .rz-grid-table thead .rz-column-title {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #333333 !important;
    cursor: pointer !important;
    position: relative !important;
    padding: 8px !important;
    transition: background-color 0.2s ease !important;
}

/* Style the sort indicator specifically for RadzenDataGrid */
.dark-mode-grid.document-vault-grid .rz-grid-table .rz-sort-indicator {
    color: #90caf9 !important;
    visibility: visible !important;
}

/* Fix z-index issues that might prevent clicking */
.dark-mode-grid.document-vault-grid thead th,
.dark-mode-grid.document-vault-grid .rz-column-title,
.dark-mode-grid.document-vault-grid .rz-grid-table .rz-grid-header {
    z-index: 10 !important;
    position: relative !important;
}

/* Ensure event propagation by fixing any pointer-events issues */
.dark-mode-grid.document-vault-grid th *,
.dark-mode-grid.document-vault-grid .rz-column-title * {
    pointer-events: auto !important;
}

/* Enhanced styling for sortable columns */
.dark-mode-grid.document-vault-grid .rz-sortable-column:hover {
    background-color: #3d3d3d !important;
}

.dark-mode-grid.document-vault-grid .rz-sortable-column:after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
    z-index: 1 !important;
}

/* Fix for sort indicators */
.dark-mode-grid.document-vault-grid .rz-sort-indicator {
    color: #90caf9 !important;
    margin-left: 5px !important;
    position: relative !important;
    z-index: 5 !important;
}

/* Active sort column styling */
.dark-mode-grid.document-vault-grid .rz-grid-table .rz-column-title.rz-sorted-column {
    background-color: #3d3d3d !important;
    font-weight: bold !important;
}