/**
 * Radzen DataGrid fixes for DocumentVault
 * Addresses styling issues with Radzen DataGrid in both light and dark modes
 */

/* General grid styling that applies to both light and dark modes */
.document-vault-grid .rz-datatable-header,
.document-vault-grid .rz-grid-header,
.document-vault-grid .rz-grid-table thead th {
    background-color: #f8f9fa;
    color: #333333;
    border-color: #e0e0e0;
}

/* Sortable column styling for light mode */
.document-vault-grid .rz-sortable-column {
    background-color: #f8f9fa;
    color: #333333;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Hover effect for sortable columns in light mode */
.document-vault-grid .rz-sortable-column:hover {
    background-color: #e9ecef;
}

/* Active/selected column styling in light mode */
.document-vault-grid .rz-state-highlight,
.document-vault-grid .rz-sortable-column.rz-state-active {
    background-color: #e9ecef;
    color: #333333;
    font-weight: 500;
}

/* Fix header styling for dark mode */
.dark-theme .document-vault-grid .rz-datatable-header,
.dark-theme .document-vault-grid .rz-grid-header,
.dark-theme .document-vault-grid .rz-grid-table thead th {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

/* Fix sortable column styling for dark mode */
.dark-theme .document-vault-grid .rz-sortable-column {
    background-color: #303030 !important; /* Lighter shade of dark gray */
    color: #ffffff !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease;
}

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

/* Active/selected column styling in dark mode */
.dark-theme .document-vault-grid .rz-state-highlight,
.dark-theme .document-vault-grid .rz-sortable-column.rz-state-active {
    background-color: #3d3d3d !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Make sort icons visible in dark mode */
.dark-theme .document-vault-grid .rzi-sort,
.dark-theme .document-vault-grid .rzi-sort-asc,
.dark-theme .document-vault-grid .rzi-sort-desc,
.dark-theme .document-vault-grid .rz-sortable-column .rzi {
    color: #90caf9 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Grid rows styling for dark mode */
.dark-theme .document-vault-grid .rz-datatable-data td,
.dark-theme .document-vault-grid .rz-grid-table td {
    background-color: #212121 !important; /* Slightly lighter dark background */
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Alternating row styling for dark mode */
.dark-theme .document-vault-grid .rz-datatable-data tr:nth-child(even) td,
.dark-theme .document-vault-grid .rz-grid-table tr:nth-child(even) td {
    background-color: #2a2a2a !important; /* Lighter shade for alternating rows */
}

/* Row hover effect in dark mode */
.dark-theme .document-vault-grid .rz-datatable-data tr:hover td,
.dark-theme .document-vault-grid .rz-grid-table tr:hover td {
    background-color: #383838 !important; /* Lighter hover color */
}

/* Make sure text is visible in grid cells in dark mode */
.dark-theme .document-vault-grid .rz-cell-data {
    color: #e0e0e0 !important;
}

/* Fix truncated text styling in grid cells */
.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dark-theme .truncate-text {
    color: #e0e0e0 !important;
}

/* Fix for buttons in grid */
.dark-theme .document-vault-grid .rz-button {
    background-color: #1976d2 !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

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

/* Fix z-index issues with header cells to ensure clickability */
.dark-mode-grid.document-vault-grid .rz-grid-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}

/* Fix for RTL content */
.dark-mode-grid.document-vault-grid .rz-data-row[dir="rtl"] {
    text-align: right !important;
}

/* Styling for filter popup and menu */
.rz-filter-menu, 
.rz-calendar, 
.rz-dropdown-list, 
.rz-dropdown-panel,
.rz-popup,
.rz-dropdown-popup {
    color: #e0e0e0 !important;
    background-color: #2d2d2d !important;
    border: 1px solid #444 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Style for filter popup header */
.rz-filter-menu .rz-filter-header,
.rz-calendar-header,
.rz-dropdown-header {
    background-color: #3d3d3d !important;
    color: #ffffff !important;
    border-bottom: 1px solid #555 !important;
}

/* Advanced filter operator styles */
.rz-filter-operations {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}

.rz-filter-operations .rz-listbox-item {
    color: #e0e0e0 !important;
    padding: 8px 12px !important;
}

.rz-filter-operations .rz-listbox-item:hover {
    background-color: #3d3d3d !important;
}

.rz-filter-operations .rz-listbox-item.rz-state-highlight {
    background-color: #1976d2 !important;
    color: #ffffff !important;
}

/* Operator dropdown button */
.rz-filter-menu .rz-dropdown-label {
    color: #e0e0e0 !important;
}

/* Style for filter buttons */
.rz-filter-menu .rz-button,
.rz-filter-buttons .rz-button {
    background-color: #1976d2 !important;
    color: #ffffff !important;
    border: none !important;
}

.rz-filter-menu .rz-button:hover,
.rz-filter-buttons .rz-button:hover {
    background-color: #1565c0 !important;
}

/* Style for filter inputs */
.rz-filter-menu .rz-textbox,
.rz-filter-menu .rz-spinner,
.rz-filter-menu .rz-numeric-textbox,
.rz-filter-menu .rz-datepicker,
.rz-filter-menu .rz-dropdown,
.rz-filter-menu input,
.rz-dropdown-items-wrapper,
.rz-dropdown-list,
.rz-dropdown-item,
.rz-dropdown-filter {
    background-color: #3d3d3d !important;
    color: #e0e0e0 !important;
    border: 1px solid #555 !important;
}

/* Light mode: Popup filter styling */
body:not(.dark-theme) .rz-calendar-filter .rz-calendar,
body:not(.dark-theme) .rz-lookup-search-panel,
body:not(.dark-theme) .rz-filter-popup,
body:not(.dark-theme) .rz-dropdown-list {
    background-color: #ffffff;
    border: 1px solid #ddd;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

body:not(.dark-theme) .rz-lookup-search-panel input,
body:not(.dark-theme) .rz-filter-popup .rz-textbox,
body:not(.dark-theme) .rz-filter-popup .rz-spinner,
body:not(.dark-theme) .rz-filter-popup .rz-spinner-button,
body:not(.dark-theme) .rz-filter-popup .rz-numeric-text,
body:not(.dark-theme) .rz-filter-popup .rz-dropdown,
body:not(.dark-theme) .rz-filter-popup .rz-dropdown-trigger,
body:not(.dark-theme) .rz-filter-popup .rz-dropdown-clear,
body:not(.dark-theme) .rz-filter-popup .rz-dropdown-list,
body:not(.dark-theme) .rz-filter-popup .rz-dropdown-item {
    background-color: #fff;
    color: #333;
    border-color: #ddd;
}

/* Light mode: Advanced filter popup styling */
body:not(.dark-theme) .rz-filter-menu,
body:not(.dark-theme) .rz-filter-menu-item,
body:not(.dark-theme) .rz-filter-menu-operators,
body:not(.dark-theme) .rz-filter-menu-operator,
body:not(.dark-theme) .rz-filter-menu-buttons,
body:not(.dark-theme) .rz-filter-button {
    background-color: #fff;
    color: #333;
    border-color: #ddd;
}

body:not(.dark-theme) .rz-filter-menu-operator:hover,
body:not(.dark-theme) .rz-filter-menu-item:hover,
body:not(.dark-theme) .rz-filter-button:hover {
    background-color: #f5f5f5;
}

/* Dark mode: Popup filter styling */
body.dark-theme .rz-calendar-filter .rz-calendar,
body.dark-theme .rz-lookup-search-panel,
body.dark-theme .rz-filter-popup,
body.dark-theme .rz-dropdown-list {
    background-color: #2d2d2d !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
}

body.dark-theme .rz-lookup-search-panel input,
body.dark-theme .rz-filter-popup .rz-textbox,
body.dark-theme .rz-filter-popup .rz-spinner,
body.dark-theme .rz-filter-popup .rz-spinner-button,
body.dark-theme .rz-filter-popup .rz-numeric-text,
body.dark-theme .rz-filter-popup .rz-dropdown,
body.dark-theme .rz-filter-popup .rz-dropdown-trigger,
body.dark-theme .rz-filter-popup .rz-dropdown-clear,
body.dark-theme .rz-filter-popup .rz-dropdown-list,
body.dark-theme .rz-filter-popup .rz-dropdown-item {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

/* Dark mode: Advanced filter popup styling */
body.dark-theme .rz-filter-menu,
body.dark-theme .rz-filter-menu-item,
body.dark-theme .rz-filter-menu-operators,
body.dark-theme .rz-filter-menu-operator,
body.dark-theme .rz-filter-menu-buttons,
body.dark-theme .rz-filter-button {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

body.dark-theme .rz-filter-menu-operator:hover,
body.dark-theme .rz-filter-menu-item:hover,
body.dark-theme .rz-filter-button:hover {
    background-color: #3d3d3d !important;
}

body.dark-theme .rz-filter-menu .rz-calendar {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
}

body.dark-theme .rz-filter-menu .rz-calendar table {
    color: #e0e0e0 !important;
}

body.dark-theme .rz-filter-menu .rz-calendar .rz-state-active {
    background-color: #1976d2 !important;
    color: white !important;
}

body.dark-theme .rz-filter-menu .rz-calendar .rz-calendar-today {
    background-color: #333 !important;
    color: #e0e0e0 !important;
}

body.dark-theme .rz-filter-menu .rz-calendar th {
    color: #bdbdbd !important;
}

/* Date picker specific styling */
.rz-datepicker-group,
.rz-datepicker-footer {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
}

.rz-datepicker-header {
    background-color: #3d3d3d !important;
    color: #ffffff !important;
}

.rz-datepicker table {
    background-color: #2d2d2d !important;
}

.rz-datepicker table td {
    color: #e0e0e0 !important;
}

.rz-datepicker table td.rz-state-today {
    background-color: rgba(25, 118, 210, 0.3) !important;
    color: #ffffff !important;
}

.rz-datepicker table td.rz-state-active {
    background-color: #1976d2 !important;
    color: #ffffff !important;
}

/* Dropdown specific styling */
.rz-dropdown-items {
    background-color: #2d2d2d !important;
}

.rz-dropdown-item {
    color: #e0e0e0 !important;
}

.rz-dropdown-item:hover {
    background-color: #3d3d3d !important;
}

.rz-dropdown-item.rz-state-highlight {
    background-color: #1976d2 !important;
    color: #ffffff !important;
}

/* Filter icon styling */
.rz-column-filter {
    color: #90caf9 !important;
    opacity: 0.8 !important;
}

.rz-column-filter:hover {
    opacity: 1 !important;
}

/* Style for active filters */
.rz-column-filter.rz-state-active {
    color: #1976d2 !important;
    opacity: 1 !important;
}

/* Clear filter button */
.rz-clear-filter {
    background-color: transparent !important;
    color: #90caf9 !important;
}

.rz-clear-filter:hover {
    color: #ffffff !important;
}