/* Radzen DataGrid Dark Mode Styles for DocumentVault
 * 
 * This file contains dark mode styling specifically for Radzen components
 * to ensure proper contrast and visibility in dark mode.
 * 
 * Colors follow the established dark theme palette:
 * - Dark backgrounds (#121212, #1e1e1e, #2d2d2d)
 * - Light text (#ffffff, #e0e0e0)
 * - Medium gray secondary text (#bdbdbd)
 * - Blue accents (#1976d2, #4f9bff)
 */

/* DataGrid Container - more forceful selectors */
.dark-theme .rz-datatable,
.dark-theme .rz-grid-table,
.dark-theme div.rz-datatable,
.dark-theme div.rz-grid-table,
.dark-theme table.rz-grid-table,
.dark-theme .rz-datatable-scrollable-wrapper,
.dark-theme .rz-datatable-scrollable-view,
.dark-theme div[class*="rz-datatable"],
.dark-theme .rz-data-grid,
.dark-theme .rz-tabview-panels {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Grid Headers - more forceful selectors */
.dark-theme .rz-datatable-thead th,
.dark-theme .rz-grid-table thead th,
.dark-theme .rz-datatable-header,
.dark-theme th.rz-grid-table-header,
.dark-theme .rz-grid-table th,
.dark-theme th[class*="rz-"],
.dark-theme .rz-grid-header,
.dark-theme thead[class*="rz-"] th,
.dark-theme .rz-grid-table-header,
.dark-theme .rz-column-header,
.dark-theme .rz-sortable-column,
.dark-theme div.rz-grid-header,
.dark-theme div[class*="rz-grid-header"] {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Column Filter Icons */
.dark-theme .rz-column-filter {
    color: #bdbdbd !important;
}

.dark-theme .rz-column-filter:hover {
    color: #ffffff !important;
}

/* Grid Cells - more forceful selectors */
.dark-theme .rz-datatable-data td,
.dark-theme .rz-grid-table .rz-grid-cell,
.dark-theme td.rz-grid-cell,
.dark-theme .rz-grid-cell,
.dark-theme td[class*="rz-"],
.dark-theme tbody[class*="rz-"] td,
.dark-theme .rz-data-row td,
.dark-theme .rz-editable-row td,
.dark-theme .rz-datatable-even td,
.dark-theme .rz-datatable-odd td,
.dark-theme div.rz-grid-content,
.dark-theme .rz-grid-content,
.dark-theme .rz-datatable-data,
.dark-theme tr[class*="rz-"] td {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Alternate Row Colors - more forceful selectors */
.dark-theme .rz-datatable-data tr:nth-child(even) td,
.dark-theme .rz-grid-table tr:nth-child(even) .rz-grid-cell,
.dark-theme tr.rz-datatable-even td,
.dark-theme tr[class*="rz-"]:nth-child(even) td,
.dark-theme tbody tr:nth-child(even) td,
.dark-theme .rz-grid-table .rz-grid-row:nth-child(even),
.dark-theme .rz-grid-table .rz-grid-row:nth-child(even) > .rz-grid-cell,
.dark-theme .rz-grid-table .rz-grid-row:nth-child(even) td {
    background-color: #252525 !important;
}

/* Row Hover */
.dark-theme .rz-datatable-data tr:hover td,
.dark-theme .rz-grid-table tr:hover .rz-grid-cell {
    background-color: #2d2d2d !important;
}

/* Selected Row */
.dark-theme .rz-state-highlight td,
.dark-theme .rz-datatable-selectable .rz-state-highlight,
.dark-theme .rz-grid-table .rz-state-highlight .rz-grid-cell {
    background-color: rgba(25, 118, 210, 0.2) !important;
    color: #e0e0e0 !important;
}

/* Paging Controls */
.dark-theme .rz-paginator,
.dark-theme .rz-datatable-footer {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

.dark-theme .rz-paginator-element {
    color: #bdbdbd !important;
    background-color: transparent !important;
}

.dark-theme .rz-paginator-element:hover {
    color: #ffffff !important;
    background-color: #333333 !important;
}

.dark-theme .rz-paginator-page.rz-state-active {
    background-color: #1976d2 !important;
    color: #ffffff !important;
}

/* Filter Dropdown */
.dark-theme .rz-dropdown,
.dark-theme .rz-dropdown-trigger,
.dark-theme .rz-dropdown-panel {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

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

.dark-theme .rz-dropdown-item:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Filter Dialog */
.dark-theme .rz-dialog,
.dark-theme .rz-dialog-content,
.dark-theme .rz-dialog-titlebar {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

.dark-theme .rz-dialog-titlebar {
    background-color: #2d2d2d !important;
    border-bottom-color: #333333 !important;
}

.dark-theme .rz-dialog-titlebar-close,
.dark-theme .rz-dialog-titlebar-icon {
    color: #bdbdbd !important;
}

.dark-theme .rz-dialog-titlebar-close:hover,
.dark-theme .rz-dialog-titlebar-icon:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Form Controls in Filters */
.dark-theme .rz-textbox,
.dark-theme .rz-inputtext,
.dark-theme .rz-autocomplete,
.dark-theme .rz-calendar,
.dark-theme .rz-spinner {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

.dark-theme .rz-textbox:focus,
.dark-theme .rz-inputtext:focus,
.dark-theme .rz-autocomplete:focus {
    border-color: #1976d2 !important;
    box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25) !important;
}

/* Calendar Popup */
.dark-theme .rz-datepicker-popup {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
}

.dark-theme .rz-datepicker-header {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

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

.dark-theme .rz-datepicker-calendar td span {
    color: #e0e0e0 !important;
}

.dark-theme .rz-datepicker-calendar td a {
    color: #e0e0e0 !important;
}

.dark-theme .rz-datepicker-calendar td a:hover {
    background-color: #333333 !important;
}

.dark-theme .rz-datepicker-calendar td a.rz-state-active {
    background-color: #1976d2 !important;
    color: #ffffff !important;
}

/* Buttons in Filters */
.dark-theme .rz-button {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

.dark-theme .rz-button.rz-primary {
    background-color: #1976d2 !important;
    color: #ffffff !important;
    border-color: #1565c0 !important;
}

.dark-theme .rz-button:hover {
    background-color: #333333 !important;
}

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

/* Empty Data Message */
.dark-theme .rz-datatable-emptymessage td {
    background-color: #1e1e1e !important;
    color: #bdbdbd !important;
}

/* Mask/Overlay */
.dark-theme .rz-overlaypanel,
.dark-theme .rz-menu {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

/* Mask/Overlay Items */
.dark-theme .rz-menuitem {
    color: #e0e0e0 !important;
}

.dark-theme .rz-menuitem:hover {
    background-color: #333333 !important;
}

.dark-theme .rz-menuitem-icon {
    color: #bdbdbd !important;
}

/* Scrollbars for DataGrid */
.dark-theme .rz-datatable .rz-scroller::-webkit-scrollbar,
.dark-theme .rz-grid-table-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.dark-theme .rz-datatable .rz-scroller::-webkit-scrollbar-track,
.dark-theme .rz-grid-table-wrapper::-webkit-scrollbar-track {
    background: #1e1e1e;
}

.dark-theme .rz-datatable .rz-scroller::-webkit-scrollbar-thumb,
.dark-theme .rz-grid-table-wrapper::-webkit-scrollbar-thumb {
    background: #444444;
    border-radius: 5px;
}

.dark-theme .rz-datatable .rz-scroller::-webkit-scrollbar-thumb:hover,
.dark-theme .rz-grid-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

/* Fix for specific grid components in documents page */
.dark-theme #documents-grid-container {
    background-color: #1e1e1e !important;
}

.dark-theme #documents-grid-container .rz-g-col-10 {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* DataGrid Button Styling */
.dark-theme .rz-button-md.rz-variant-text {
    color: #4f9bff !important;
}

.dark-theme .rz-button-md.rz-variant-text:hover {
    background-color: rgba(79, 155, 255, 0.1) !important;
}

.dark-theme .rz-button-md.rz-danger {
    color: #f44336 !important;
}

.dark-theme .rz-button-md.rz-danger:hover {
    background-color: rgba(244, 67, 54, 0.1) !important;
}

/* DataGrid icons */
.dark-theme .rzi, 
.dark-theme .rz-column-filter .rzi-filter,
.dark-theme .rz-grid-filter-icon,
.dark-theme .rz-grid-table .rzi {
    color: #bdbdbd !important;
}

.dark-theme .rzi:hover, 
.dark-theme .rz-column-filter:hover .rzi-filter,
.dark-theme .rz-grid-filter-icon:hover,
.dark-theme .rz-grid-table .rzi:hover {
    color: #ffffff !important;
}

/* Modern grid container - direct targeting */
.dark-theme .modern-grid-container,
.dark-theme #documents-grid-container,
.dark-theme div[id="documents-grid-container"],
.dark-theme div.modern-grid-container {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
}

/* Target documents grid container and all its contents directly */
.dark-theme #documents-grid-container,
.dark-theme #documents-grid-container *:not(.rzi):not(button *) {
    color: #e0e0e0 !important;
}

.dark-theme #documents-grid-container,
.dark-theme #documents-grid-container .rz-data-grid,
.dark-theme #documents-grid-container .rz-grid,
.dark-theme #documents-grid-container .rz-datatable,
.dark-theme #documents-grid-container .rz-datatable-tablewrapper,
.dark-theme #documents-grid-container .rz-datatable-scrollable-wrapper,
.dark-theme #documents-grid-container .rz-datatable-scrollable-view,
.dark-theme #documents-grid-container .rz-virtualized-table-wrapper,
.dark-theme #documents-grid-container div[class*="rz-data-grid"],
.dark-theme #documents-grid-container div[class*="rz-grid"],
.dark-theme #documents-grid-container .rz-grid-content {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Direct targeting of grid headers */
.dark-theme #documents-grid-container .rz-grid-header,
.dark-theme #documents-grid-container .rz-grid-table-header,
.dark-theme #documents-grid-container .rz-data-grid-header,
.dark-theme #documents-grid-container [class*="rz-grid-header"],
.dark-theme #documents-grid-container [class*="rz-data-grid-header"],
.dark-theme #documents-grid-container .rz-datatable-thead,
.dark-theme #documents-grid-container thead,
.dark-theme #documents-grid-container thead th,
.dark-theme #documents-grid-container .rz-sortable-column,
.dark-theme #documents-grid-container .rz-grid-table-header {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Direct targeting of data cells and table body */
.dark-theme #documents-grid-container .rz-data-grid-data,
.dark-theme #documents-grid-container .rz-grid-table-body,
.dark-theme #documents-grid-container .rz-datatable-data,
.dark-theme #documents-grid-container .rz-grid-content,
.dark-theme #documents-grid-container .rz-grid-table tbody,
.dark-theme #documents-grid-container tbody,
.dark-theme #documents-grid-container tbody tr,
.dark-theme #documents-grid-container tbody td,
.dark-theme #documents-grid-container .rz-grid-cell,
.dark-theme #documents-grid-container .rz-grid-table .rz-grid-table-body {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Even more forceful selectors for troublesome elements */
.dark-theme #documents-grid-container table,
.dark-theme #documents-grid-container .rz-grid-table {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Alternate row styling */
.dark-theme #documents-grid-container tbody tr:nth-child(even),
.dark-theme #documents-grid-container tbody tr:nth-child(even) td,
.dark-theme #documents-grid-container .rz-grid-table tbody tr:nth-child(even),
.dark-theme #documents-grid-container .rz-grid-table tbody tr:nth-child(even) td {
    background-color: #252525 !important;
}

/* Truncate text in grid cells */
.dark-theme .truncate-text {
    color: #e0e0e0 !important;
}

/* Direct styling for the document-vault-grid class */
.dark-theme .document-vault-grid,
.dark-theme .document-vault-grid table,
.dark-theme .dark-mode-grid,
.dark-theme .dark-mode-grid table {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

.dark-theme .document-vault-grid thead,
.dark-theme .document-vault-grid thead th,
.dark-theme .dark-mode-grid thead,
.dark-theme .dark-mode-grid thead th {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

.dark-theme .document-vault-grid tbody,
.dark-theme .document-vault-grid tbody td,
.dark-theme .dark-mode-grid tbody,
.dark-theme .dark-mode-grid tbody td {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

.dark-theme .document-vault-grid tbody tr:nth-child(even) td,
.dark-theme .dark-mode-grid tbody tr:nth-child(even) td {
    background-color: #252525 !important;
}

/* Override any inline styles that might be interfering */
.dark-theme .document-vault-grid [style*="background-color"],
.dark-theme .dark-mode-grid [style*="background-color"] {
    background-color: #1e1e1e !important;
}

.dark-theme .document-vault-grid [style*="color"],
.dark-theme .dark-mode-grid [style*="color"] {
    color: #e0e0e0 !important;
}

.dark-theme .document-vault-grid thead [style*="background-color"],
.dark-theme .dark-mode-grid thead [style*="background-color"] {
    background-color: #2d2d2d !important;
}

/* Fix checkbox styling in dark mode */
.dark-theme input[type="checkbox"],
.dark-theme .form-check-input,
.dark-theme .rz-chkbox,
.dark-theme .rz-checkbox {
    background-color: #2d2d2d !important;
    border-color: #555555 !important;
}

.dark-theme input[type="checkbox"]:checked,
.dark-theme .form-check-input:checked,
.dark-theme .rz-chkbox-box.rz-state-active,
.dark-theme .rz-checkbox:checked {
    background-color: #1976d2 !important;
    border-color: #1976d2 !important;
}

.dark-theme .rz-checkbox-icon {
    color: #ffffff !important;
}

.dark-theme .rz-chkbox-box .rzi-check {
    color: #ffffff !important;
}

/* Upload Progress Panel Dark Mode Styling */
.dark-theme .upload-list {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

.dark-theme .upload-item {
    background-color: #2d2d2d !important;
    border: 1px solid #333333 !important;
    color: #e0e0e0 !important;
    margin-bottom: 8px !important;
    padding: 12px !important;
    border-radius: 4px !important;
}

.dark-theme .upload-item-name,
.dark-theme .upload-item-size,
.dark-theme .upload-item-progress,
.dark-theme .upload-error {
    color: #e0e0e0 !important;
}

.dark-theme .upload-error {
    color: #f44336 !important;
}

.dark-theme .upload-error-message {
    background-color: rgba(244, 67, 54, 0.1) !important;
    color: #f44336 !important;
    border: 1px solid rgba(244, 67, 54, 0.3) !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
}

/* Drag and Drop Overlay Dark Mode Styling */
.dark-theme .drag-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.dark-theme .drag-overlay-content {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border: 2px dashed #555555 !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
}

.dark-theme .drag-overlay-content h3 {
    color: #ffffff !important;
}

.dark-theme .drag-overlay-content p {
    color: #bdbdbd !important;
}

.dark-theme .drag-overlay-content i {
    color: #4f9bff !important;
}

.dark-theme .drag-overlay-content.uploading {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
}

.dark-theme .drag-overlay-content.uploading i {
    color: #ffc107 !important;
}