/* ================================================================
   RFS Theme Tokens - Design System Variables
   ================================================================
   
   This file defines CSS custom properties (variables) for the RFS feature.
   These tokens enable seamless light/dark mode switching without duplicating
   entire stylesheets.
   
   HOW IT WORKS:
   - Variables are defined in :root for light mode (default)
   - Dark mode overrides are applied when body has [data-theme="dark"]
   - All RFS component CSS files consume these variables
   
   HOW TO USE IN NEW COMPONENTS:
   - Use var(--rfs-*) for colors instead of hard-coded hex values
   - Example: background: var(--rfs-bg-primary);
   
   NAMING CONVENTION:
   - --rfs-bg-*      : Background colors
   - --rfs-text-*    : Text colors
   - --rfs-border-*  : Border colors
   - --rfs-accent-*  : Accent/brand colors
   - --rfs-status-*  : Status indicator colors
   - --rfs-shadow-*  : Box shadow values
   ================================================================ */

/* ================================================================
   LIGHT MODE (Default)
   ================================================================ */
:root {
    /* Background Colors */
    --rfs-bg-page: #f8fafc;
    --rfs-bg-primary: #ffffff;
    --rfs-bg-secondary: #f8fafc;
    --rfs-bg-tertiary: #f1f5f9;
    --rfs-bg-hover: #f1f5f9;
    --rfs-bg-active: #e2e8f0;
    --rfs-bg-input: #ffffff;
    --rfs-bg-input-disabled: #f1f5f9;
    --rfs-bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* Card/Panel Backgrounds */
    --rfs-bg-card: #ffffff;
    --rfs-bg-card-header: #f8fafc;
    --rfs-bg-card-footer: #f8fafc;
    --rfs-bg-card-elevated: #ffffff;
    
    /* Text Colors */
    --rfs-text-primary: #1e293b;
    --rfs-text-secondary: #475569;
    --rfs-text-tertiary: #64748b;
    --rfs-text-muted: #94a3b8;
    --rfs-text-placeholder: #94a3b8;
    --rfs-text-inverse: #ffffff;
    --rfs-text-link: #3b82f6;
    --rfs-text-link-hover: #2563eb;
    
    /* Border Colors */
    --rfs-border-primary: #e2e8f0;
    --rfs-border-secondary: #f1f5f9;
    --rfs-border-focus: #3b82f6;
    --rfs-border-input: #e2e8f0;
    --rfs-border-input-hover: #cbd5e1;
    
    /* Accent/Brand Colors */
    --rfs-accent-primary: #3b82f6;
    --rfs-accent-primary-hover: #2563eb;
    --rfs-accent-primary-light: #eff6ff;
    --rfs-accent-primary-muted: rgba(59, 130, 246, 0.1);
    
    /* Status Colors */
    --rfs-status-success: #22c55e;
    --rfs-status-success-light: #dcfce7;
    --rfs-status-success-text: #166534;
    
    --rfs-status-warning: #f59e0b;
    --rfs-status-warning-light: #fef3c7;
    --rfs-status-warning-text: #92400e;
    
    --rfs-status-danger: #ef4444;
    --rfs-status-danger-light: #fef2f2;
    --rfs-status-danger-text: #dc2626;
    
    --rfs-status-info: #3b82f6;
    --rfs-status-info-light: #dbeafe;
    --rfs-status-info-text: #1d4ed8;
    
    --rfs-status-neutral: #64748b;
    --rfs-status-neutral-light: #f1f5f9;
    --rfs-status-neutral-text: #475569;
    
    /* Badge Colors */
    --rfs-badge-new-bg: #dcfce7;
    --rfs-badge-new-text: #166534;
    --rfs-badge-priority-bg: #e0e7ff;
    --rfs-badge-priority-text: #4338ca;
    --rfs-badge-progress-bg: #f1f5f9;
    --rfs-badge-progress-text: #475569;
    --rfs-badge-project-bg: #f3e8ff;
    --rfs-badge-project-text: #7c3aed;
    --rfs-badge-comments-bg: #fef3c7;
    --rfs-badge-comments-text: #92400e;
    
    /* Tag Colors (with background class variants) */
    --rfs-tag-primary: #3b82f6;
    --rfs-tag-success: #22c55e;
    --rfs-tag-warning: #f59e0b;
    --rfs-tag-danger: #ef4444;
    --rfs-tag-secondary: #64748b;
    --rfs-tag-info: #06b6d4;
    --rfs-tag-dark: #1e293b;
    
    /* Button Colors */
    --rfs-btn-primary-bg: #3b82f6;
    --rfs-btn-primary-text: #ffffff;
    --rfs-btn-primary-hover: #2563eb;
    
    --rfs-btn-secondary-bg: transparent;
    --rfs-btn-secondary-text: #64748b;
    --rfs-btn-secondary-border: #e2e8f0;
    --rfs-btn-secondary-hover-bg: #f1f5f9;
    --rfs-btn-secondary-hover-text: #334155;
    
    --rfs-btn-danger-ghost-hover-bg: #fef2f2;
    --rfs-btn-danger-ghost-hover-text: #ef4444;
    
    /* Form Colors */
    --rfs-input-bg: #ffffff;
    --rfs-input-border: #e2e8f0;
    --rfs-input-text: #1e293b;
    --rfs-input-focus-border: #3b82f6;
    --rfs-input-focus-shadow: rgba(59, 130, 246, 0.1);
    
    /* Shadow Values */
    --rfs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --rfs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --rfs-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
    --rfs-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
    --rfs-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
    --rfs-shadow-pane: 2px 0 8px rgba(0, 0, 0, 0.04);
    
    /* Scrollbar Colors */
    --rfs-scrollbar-track: transparent;
    --rfs-scrollbar-thumb: #cbd5e1;
    --rfs-scrollbar-thumb-hover: #94a3b8;
    
    /* Table Colors */
    --rfs-table-header-bg: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    --rfs-table-header-text: #ffffff;
    --rfs-table-row-bg: #ffffff;
    --rfs-table-row-alt-bg: #f8fafc;
    --rfs-table-row-hover: #f8fafc;
    --rfs-table-border: #e2e8f0;
    
    /* Progress/Stepper Colors */
    --rfs-step-completed: #22c55e;
    --rfs-step-active: #3b82f6;
    --rfs-step-pending: #e2e8f0;
    --rfs-step-pending-text: #94a3b8;
    
    /* Special Elements */
    --rfs-avatar-placeholder: #f1f5f9;
    --rfs-divider: #f1f5f9;
    --rfs-highlight: #fef3c7;
    
    /* Gradient Backgrounds */
    --rfs-gradient-page: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    --rfs-gradient-success: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    --rfs-gradient-primary: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    --rfs-gradient-header: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

/* ================================================================
   DARK MODE
   Applied when body has data-theme="dark" attribute
   ================================================================ */
body[data-theme="dark"] {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;

    /* Background Colors */
    --rfs-bg-page: #0f172a;
    --rfs-bg-primary: #1e293b;
    --rfs-bg-secondary: #1e293b;
    --rfs-bg-tertiary: #334155;
    --rfs-bg-hover: #334155;
    --rfs-bg-active: #475569;
    --rfs-bg-input: #1e293b;
    --rfs-bg-input-disabled: #334155;
    --rfs-bg-overlay: rgba(0, 0, 0, 0.7);
    
    /* Card/Panel Backgrounds */
    --rfs-bg-card: #1e293b;
    --rfs-bg-card-header: #334155;
    --rfs-bg-card-footer: #334155;
    --rfs-bg-card-elevated: #334155;
    
    /* Text Colors */
    --rfs-text-primary: #f1f5f9;
    --rfs-text-secondary: #cbd5e1;
    --rfs-text-tertiary: #94a3b8;
    --rfs-text-muted: #64748b;
    --rfs-text-placeholder: #64748b;
    --rfs-text-inverse: #0f172a;
    --rfs-text-link: #60a5fa;
    --rfs-text-link-hover: #93c5fd;
    
    /* Border Colors */
    --rfs-border-primary: #334155;
    --rfs-border-secondary: #475569;
    --rfs-border-focus: #60a5fa;
    --rfs-border-input: #475569;
    --rfs-border-input-hover: #64748b;
    
    /* Accent/Brand Colors */
    --rfs-accent-primary: #60a5fa;
    --rfs-accent-primary-hover: #93c5fd;
    --rfs-accent-primary-light: rgba(96, 165, 250, 0.15);
    --rfs-accent-primary-muted: rgba(96, 165, 250, 0.1);
    
    /* Status Colors - Adjusted for dark backgrounds */
    --rfs-status-success: #4ade80;
    --rfs-status-success-light: rgba(74, 222, 128, 0.15);
    --rfs-status-success-text: #86efac;
    
    --rfs-status-warning: #fbbf24;
    --rfs-status-warning-light: rgba(251, 191, 36, 0.15);
    --rfs-status-warning-text: #fcd34d;
    
    --rfs-status-danger: #f87171;
    --rfs-status-danger-light: rgba(248, 113, 113, 0.15);
    --rfs-status-danger-text: #fca5a5;
    
    --rfs-status-info: #60a5fa;
    --rfs-status-info-light: rgba(96, 165, 250, 0.15);
    --rfs-status-info-text: #93c5fd;
    
    --rfs-status-neutral: #94a3b8;
    --rfs-status-neutral-light: rgba(148, 163, 184, 0.15);
    --rfs-status-neutral-text: #cbd5e1;
    
    /* Badge Colors */
    --rfs-badge-new-bg: rgba(74, 222, 128, 0.2);
    --rfs-badge-new-text: #86efac;
    --rfs-badge-priority-bg: rgba(129, 140, 248, 0.2);
    --rfs-badge-priority-text: #a5b4fc;
    --rfs-badge-progress-bg: rgba(148, 163, 184, 0.2);
    --rfs-badge-progress-text: #cbd5e1;
    --rfs-badge-project-bg: rgba(192, 132, 252, 0.2);
    --rfs-badge-project-text: #d8b4fe;
    --rfs-badge-comments-bg: rgba(251, 191, 36, 0.2);
    --rfs-badge-comments-text: #fcd34d;
    
    /* Tag Colors */
    --rfs-tag-primary: #60a5fa;
    --rfs-tag-success: #4ade80;
    --rfs-tag-warning: #fbbf24;
    --rfs-tag-danger: #f87171;
    --rfs-tag-secondary: #94a3b8;
    --rfs-tag-info: #22d3ee;
    --rfs-tag-dark: #475569;
    
    /* Button Colors */
    --rfs-btn-primary-bg: #3b82f6;
    --rfs-btn-primary-text: #ffffff;
    --rfs-btn-primary-hover: #60a5fa;
    
    --rfs-btn-secondary-bg: transparent;
    --rfs-btn-secondary-text: #94a3b8;
    --rfs-btn-secondary-border: #475569;
    --rfs-btn-secondary-hover-bg: #334155;
    --rfs-btn-secondary-hover-text: #f1f5f9;
    
    --rfs-btn-danger-ghost-hover-bg: rgba(248, 113, 113, 0.15);
    --rfs-btn-danger-ghost-hover-text: #f87171;
    
    /* Form Colors */
    --rfs-input-bg: #1e293b;
    --rfs-input-border: #475569;
    --rfs-input-text: #f1f5f9;
    --rfs-input-focus-border: #60a5fa;
    --rfs-input-focus-shadow: rgba(96, 165, 250, 0.2);
    
    /* Shadow Values - Stronger for dark mode */
    --rfs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --rfs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --rfs-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --rfs-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
    --rfs-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
    --rfs-shadow-pane: 2px 0 8px rgba(0, 0, 0, 0.3);
    
    /* Scrollbar Colors */
    --rfs-scrollbar-track: #1e293b;
    --rfs-scrollbar-thumb: #475569;
    --rfs-scrollbar-thumb-hover: #64748b;
    
    /* Table Colors */
    --rfs-table-header-bg: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    --rfs-table-header-text: #ffffff;
    --rfs-table-row-bg: #1e293b;
    --rfs-table-row-alt-bg: #334155;
    --rfs-table-row-hover: #334155;
    --rfs-table-border: #475569;
    
    /* Progress/Stepper Colors */
    --rfs-step-completed: #4ade80;
    --rfs-step-active: #60a5fa;
    --rfs-step-pending: #475569;
    --rfs-step-pending-text: #64748b;
    
    /* Special Elements */
    --rfs-avatar-placeholder: #334155;
    --rfs-divider: #334155;
    --rfs-highlight: rgba(251, 191, 36, 0.2);
    
    /* Gradient Backgrounds */
    --rfs-gradient-page: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    --rfs-gradient-success: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(34, 197, 94, 0.15) 100%);
    --rfs-gradient-primary: linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%);
    --rfs-gradient-header: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
}

/* ================================================================
   RADZEN COMPONENT DIRECT OVERRIDES FOR DARK MODE
   These override Radzen's default styles directly
   ================================================================ */

/* Dropdown Overrides */
body[data-theme="dark"] .rz-dropdown,
body[data-theme="dark"] .rz-dropdown-panel {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-dropdown .rz-dropdown-label,
body[data-theme="dark"] .rz-dropdown .rz-inputtext {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-dropdown-items-wrapper {
    background-color: #1e293b !important;
}

body[data-theme="dark"] .rz-dropdown-item {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-dropdown-item:hover,
body[data-theme="dark"] .rz-dropdown-item.rz-state-highlight {
    background-color: #334155 !important;
}

/* Multiselect Overrides (for Multiple=true dropdowns like mentions) */
body[data-theme="dark"] .rz-multiselect {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-multiselect-panel {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-multiselect-panel .rz-multiselect-items-wrapper {
    background-color: #1e293b !important;
}

body[data-theme="dark"] .rz-multiselect-item {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-multiselect-item:hover,
body[data-theme="dark"] .rz-multiselect-item.rz-state-highlight {
    background-color: #334155 !important;
}

body[data-theme="dark"] .rz-multiselect .rz-multiselect-label {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-chips .rz-chip {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-multiselect-panel .rz-multiselect-filter-container .rz-inputtext {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* Text Input Overrides */
body[data-theme="dark"] .rz-textbox,
body[data-theme="dark"] .rz-textarea,
body[data-theme="dark"] .rz-inputtext {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-textbox::placeholder,
body[data-theme="dark"] .rz-textarea::placeholder,
body[data-theme="dark"] .rz-inputtext::placeholder {
    color: #64748b !important;
}

/* Bootstrap Form Controls - Dark Mode */
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .form-control::placeholder {
    color: #64748b !important;
}

body[data-theme="dark"] .form-control:focus,
body[data-theme="dark"] .form-select:focus {
    background-color: #1e293b !important;
    border-color: #60a5fa !important;
    color: #f1f5f9 !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1) !important;
}

body[data-theme="dark"] .form-control:disabled,
body[data-theme="dark"] .form-control[readonly],
body[data-theme="dark"] .form-select:disabled {
    background-color: #334155 !important;
    color: #64748b !important;
}

body[data-theme="dark"] .form-select option {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .form-check-input {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

body[data-theme="dark"] .form-check-input:checked {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

body[data-theme="dark"] input[type="file"] {
    color: #f1f5f9 !important;
}

/* DatePicker Overrides */
body[data-theme="dark"] .rz-datepicker,
body[data-theme="dark"] .rz-datepicker-calendar {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-calendar {
    background-color: #1e293b !important;
}

body[data-theme="dark"] .rz-calendar-header {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-calendar td span {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-calendar td span:hover {
    background-color: #334155 !important;
}

/* Dialog Overrides */
body[data-theme="dark"] .rz-dialog {
    background-color: #1e293b !important;
}

body[data-theme="dark"] .rz-dialog-wrapper {
    background-color: #1e293b !important;
}

body[data-theme="dark"] .rz-dialog-titlebar {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-bottom: 1px solid #475569 !important;
}

body[data-theme="dark"] .rz-dialog-content {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Autocomplete Overrides */
body[data-theme="dark"] .rz-autocomplete-panel,
body[data-theme="dark"] .rz-autocomplete-items {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

body[data-theme="dark"] .rz-autocomplete-item {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-autocomplete-item:hover {
    background-color: #334155 !important;
}

/* Listbox Overrides */
body[data-theme="dark"] .rz-listbox {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

body[data-theme="dark"] .rz-listbox-item {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-listbox-item:hover,
body[data-theme="dark"] .rz-listbox-item.rz-state-highlight {
    background-color: #334155 !important;
}

/* Numeric Input Overrides */
body[data-theme="dark"] .rz-numeric {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* Checkbox Overrides */
body[data-theme="dark"] .rz-checkbox .rz-checkbox-box {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

body[data-theme="dark"] .rz-checkbox.rz-state-checked .rz-checkbox-box {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* Upload Overrides */
body[data-theme="dark"] .rz-upload {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

body[data-theme="dark"] .rz-upload-files {
    background-color: #1e293b !important;
}

/* Progress Bar Overrides */
body[data-theme="dark"] .rz-progressbar {
    background-color: #334155 !important;
}

/* ================================================================
   RADZEN DATA GRID / DATA TABLE OVERRIDES FOR DARK MODE
   ================================================================ */

body[data-theme="dark"] .rz-data-grid,
body[data-theme="dark"] .rz-datatable {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: none !important;
}

body[data-theme="dark"] .rz-data-grid table,
body[data-theme="dark"] .rz-datatable table,
body[data-theme="dark"] .rz-grid-table {
    background-color: #1e293b !important;
    border-collapse: collapse !important;
}

/* Table Header - Make text visible */
body[data-theme="dark"] .rz-datatable-thead,
body[data-theme="dark"] .rz-data-grid thead {
    background-color: #334155 !important;
}

body[data-theme="dark"] .rz-datatable-thead th,
body[data-theme="dark"] .rz-data-grid th,
body[data-theme="dark"] .rz-column-title-content {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border: none !important;
    border-bottom: 1px solid #475569 !important;
}

/* Header cells only - with background */
body[data-theme="dark"] .rz-datatable-thead .rz-cell-data,
body[data-theme="dark"] .rz-data-grid thead .rz-cell-data {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border: none !important;
    border-bottom: 1px solid #475569 !important;
}

/* Body cells - no background, just text color */
body[data-theme="dark"] .rz-datatable-tbody .rz-cell-data,
body[data-theme="dark"] .rz-data-grid tbody .rz-cell-data {
    color: #f1f5f9 !important;
    border: none !important;
}

body[data-theme="dark"] .rz-column-title {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-sortable-column-icon {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .rz-datatable-thead th:hover,
body[data-theme="dark"] .rz-data-grid th:hover {
    background-color: #475569 !important;
}

/* Table Body */
body[data-theme="dark"] .rz-datatable-tbody,
body[data-theme="dark"] .rz-data-grid tbody {
    background-color: #1e293b !important;
}

body[data-theme="dark"] .rz-datatable-tbody tr,
body[data-theme="dark"] .rz-data-grid tbody tr {
    background-color: #1e293b !important;
    border: none !important;
}

body[data-theme="dark"] .rz-datatable-tbody tr:hover,
body[data-theme="dark"] .rz-data-grid tbody tr:hover {
    background-color: #334155 !important;
}

body[data-theme="dark"] .rz-datatable-tbody td,
body[data-theme="dark"] .rz-data-grid td {
    background-color: transparent !important;
    color: #f1f5f9 !important;
    border: none !important;
    border-bottom: 1px solid #334155 !important;
}

/* Paginator - Fix white buttons */
body[data-theme="dark"] .rz-paginator,
body[data-theme="dark"] .rz-pager {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border: none !important;
    border-top: 1px solid #475569 !important;
}

/* Pager container and all child elements */
body[data-theme="dark"] .rz-pager *,
body[data-theme="dark"] .rz-paginator * {
 /*   color: #f1f5f9 !important;*/
}

body[data-theme="dark"] .rz-pager-rows-per-page-label {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .rz-paginator .rz-paginator-element,
body[data-theme="dark"] .rz-paginator .rz-paginator-first,
body[data-theme="dark"] .rz-paginator .rz-paginator-prev,
body[data-theme="dark"] .rz-paginator .rz-paginator-next,
body[data-theme="dark"] .rz-paginator .rz-paginator-last,
body[data-theme="dark"] .rz-pager .rz-paginator-element,
body[data-theme="dark"] .rz-pager .rz-paginator-first,
body[data-theme="dark"] .rz-pager .rz-paginator-prev,
body[data-theme="dark"] .rz-pager .rz-paginator-next,
body[data-theme="dark"] .rz-pager .rz-paginator-last {
    color: #f1f5f9 !important;
    background-color: transparent !important;
    border: 1px solid #475569 !important;
    border-radius: 6px !important;
}

body[data-theme="dark"] .rz-paginator .rz-paginator-element:hover,
body[data-theme="dark"] .rz-paginator .rz-paginator-first:hover,
body[data-theme="dark"] .rz-paginator .rz-paginator-prev:hover,
body[data-theme="dark"] .rz-paginator .rz-paginator-next:hover,
body[data-theme="dark"] .rz-paginator .rz-paginator-last:hover,
body[data-theme="dark"] .rz-pager .rz-paginator-element:hover,
body[data-theme="dark"] .rz-pager .rz-paginator-first:hover,
body[data-theme="dark"] .rz-pager .rz-paginator-prev:hover,
body[data-theme="dark"] .rz-pager .rz-paginator-next:hover,
body[data-theme="dark"] .rz-pager .rz-paginator-last:hover {
    background-color: #475569 !important;
}

body[data-theme="dark"] .rz-paginator .rz-paginator-element:disabled,
body[data-theme="dark"] .rz-paginator .rz-paginator-first:disabled,
body[data-theme="dark"] .rz-paginator .rz-paginator-prev:disabled,
body[data-theme="dark"] .rz-paginator .rz-paginator-next:disabled,
body[data-theme="dark"] .rz-paginator .rz-paginator-last:disabled,
body[data-theme="dark"] .rz-pager .rz-paginator-element:disabled,
body[data-theme="dark"] .rz-pager .rz-paginator-first:disabled,
body[data-theme="dark"] .rz-pager .rz-paginator-prev:disabled,
body[data-theme="dark"] .rz-pager .rz-paginator-next:disabled,
body[data-theme="dark"] .rz-pager .rz-paginator-last:disabled {
    opacity: 0.4 !important;
    background-color: transparent !important;
}

body[data-theme="dark"] .rz-paginator .rz-paginator-page,
body[data-theme="dark"] .rz-pager .rz-paginator-page {
    color: #f1f5f9 !important;
    background-color: transparent !important;
    border: 1px solid #475569 !important;
    border-radius: 6px !important;
}

body[data-theme="dark"] .rz-paginator .rz-paginator-page:hover,
body[data-theme="dark"] .rz-pager .rz-paginator-page:hover {
    background-color: #475569 !important;
}

body[data-theme="dark"] .rz-paginator .rz-state-active,
body[data-theme="dark"] .rz-paginator .rz-paginator-page.rz-state-active,
body[data-theme="dark"] .rz-pager .rz-state-active,
body[data-theme="dark"] .rz-pager .rz-paginator-page.rz-state-active {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

body[data-theme="dark"] .rz-pager-summary,
body[data-theme="dark"] .rz-paginator .rz-pager-summary {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .rz-paginator .rz-dropdown,
body[data-theme="dark"] .rz-pager .rz-dropdown {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* Pager buttons and icons */
body[data-theme="dark"] .rz-pager button,
body[data-theme="dark"] .rz-paginator button {
    background-color: transparent !important;
    color: #f1f5f9 !important;
    border: 1px solid #475569 !important;
}

body[data-theme="dark"] .rz-pager button:hover,
body[data-theme="dark"] .rz-paginator button:hover {
    background-color: #475569 !important;
}

/* ================================================================
   DIALOG TITLE - ensure readable text in dark mode
   ================================================================ */

body[data-theme="dark"] .rz-dialog-title {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-dialog-titlebar-close {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .rz-dialog-titlebar-close:hover {
    color: #f1f5f9 !important;
}

/* ================================================================
   RADZEN HTML EDITOR - dark mode for rich text editor
   ================================================================ */

body[data-theme="dark"] .rz-html-editor {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

body[data-theme="dark"] .rz-html-editor .rz-html-editor-toolbar {
    background-color: #334155 !important;
    border-color: #475569 !important;
}

body[data-theme="dark"] .rz-html-editor .rz-html-editor-toolbar button,
body[data-theme="dark"] .rz-html-editor .rz-html-editor-toolbar .rz-html-editor-btn {
    color: #f1f5f9 !important;
    background-color: #475569 !important;
    border-color: #475569 !important;
}

body[data-theme="dark"] .rz-html-editor .rz-html-editor-toolbar button:hover,
body[data-theme="dark"] .rz-html-editor .rz-html-editor-toolbar .rz-html-editor-btn:hover {
    background-color: #64748b !important;
}

body[data-theme="dark"] .rz-html-editor .rz-html-editor-toolbar .rz-html-editor-separator {
    border-color: #475569 !important;
}

/* Color picker split buttons (Font Color / Background Color) */
body[data-theme="dark"] .rz-html-editor .rz-html-editor-toolbar .rz-html-editor-colorpicker {
    background-color: #475569 !important;
    border-color: #475569 !important;
}

body[data-theme="dark"] .rz-html-editor .rz-html-editor-toolbar .rz-html-editor-colorpicker button {
    color: #f1f5f9 !important;
    background-color: #475569 !important;
    border-color: #475569 !important;
}

body[data-theme="dark"] .rz-html-editor .rz-html-editor-toolbar .rz-html-editor-colorpicker:hover,
body[data-theme="dark"] .rz-html-editor .rz-html-editor-toolbar .rz-html-editor-colorpicker button:hover {
    background-color: #64748b !important;
}

/* Color picker dropdown panel */
body[data-theme="dark"] .rz-html-editor-colorpicker-popup,
body[data-theme="dark"] .rz-colorpicker-panel {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

/* Split button styling (used by color pickers) */
body[data-theme="dark"] .rz-html-editor .rz-splitbutton {
    background-color: #475569 !important;
    border-color: #475569 !important;
}

body[data-theme="dark"] .rz-html-editor .rz-splitbutton .rz-splitbutton-menubutton,
body[data-theme="dark"] .rz-html-editor .rz-splitbutton .rz-splitbutton-defaultbutton {
    background-color: #475569 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-html-editor .rz-splitbutton:hover .rz-splitbutton-menubutton,
body[data-theme="dark"] .rz-html-editor .rz-splitbutton:hover .rz-splitbutton-defaultbutton {
    background-color: #64748b !important;
}

body[data-theme="dark"] .rz-html-editor .rz-html-editor-content {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* ================================================================
   DROPDOWN PANEL ITEMS - user template dark mode
   Dropdown/Multiselect panels render at <body> level (portaled).
   Multiple=true → .rz-multiselect-panel, Single → .rz-dropdown-panel
   ================================================================ */

body[data-theme="dark"] .rz-dropdown-panel .user-dropdown-item .user-name,
body[data-theme="dark"] .rz-multiselect-panel .user-dropdown-item .user-name,
body[data-theme="dark"] .rz-popup .user-dropdown-item .user-name {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-dropdown-panel .user-dropdown-item .user-title,
body[data-theme="dark"] .rz-multiselect-panel .user-dropdown-item .user-title,
body[data-theme="dark"] .rz-popup .user-dropdown-item .user-title {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .rz-multiselect-item:hover .user-name,
body[data-theme="dark"] .rz-dropdown-item:hover .user-name {
    color: #ffffff !important;
}

body[data-theme="dark"] .rz-multiselect-item:hover .user-title,
body[data-theme="dark"] .rz-dropdown-item:hover .user-title {
    color: #cbd5e1 !important;
}

/* Global fallback: any .user-name / .user-title in dark mode portaled panels */
body[data-theme="dark"] .user-name {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .user-title {
    color: #94a3b8 !important;
}

/* Dropdown/Multiselect panel filter input */
body[data-theme="dark"] .rz-dropdown-panel .rz-dropdown-filter-container .rz-inputtext,
body[data-theme="dark"] .rz-multiselect-panel .rz-multiselect-filter-container .rz-inputtext,
body[data-theme="dark"] .rz-multiselect-panel .rz-dropdown-filter-container .rz-inputtext {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* Multiselect panel background + items */
body[data-theme="dark"] .rz-multiselect-panel {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-multiselect-panel .rz-multiselect-items-wrapper {
    background-color: #1e293b !important;
}

body[data-theme="dark"] .rz-multiselect-panel .rz-multiselect-items .rz-multiselect-item {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-multiselect-panel .rz-multiselect-items .rz-multiselect-item:hover {
    background-color: #334155 !important;
}

body[data-theme="dark"] .rz-multiselect-panel .rz-chkbox-box {
    background-color: #334155 !important;
    border-color: #64748b !important;
}

body[data-theme="dark"] .rz-multiselect-panel .rz-chkbox-box.rz-state-active {
    background-color: var(--rz-primary) !important;
    border-color: var(--rz-primary) !important;
}

/* ================================================================
   RADZEN CARD - dark mode
   ================================================================ */

body[data-theme="dark"] .rz-card {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* ================================================================
   DIALOG OVERLAY - prevent background scroll
   When any dialog overlay is open, lock body scrolling to prevent
   layout shift from the scrollbar disappearing.
   ================================================================ */

html:has(.dialog-overlay),
body:has(.dialog-overlay) {
    overflow: hidden !important;
}

/* ================================================================
   DATA MANAGEMENT INLINE MODAL DIALOGS - dark mode
   Custom .dialog-overlay / .dialog-container modals used by grids
   ================================================================ */

body[data-theme="dark"] .dialog-container {
    background: #1e293b !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

body[data-theme="dark"] .dialog-header {
    border-bottom-color: #475569 !important;
}

body[data-theme="dark"] .dialog-header h4 {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .dialog-header .btn-close,
body[data-theme="dark"] .dialog-header .btn-close i {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .dialog-body {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .dialog-body .form-group label {
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .dialog-footer {
    background: #0f172a !important;
    border-top-color: #475569 !important;
}

body[data-theme="dark"] .dialog-footer .btn-cancel {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

body[data-theme="dark"] .dialog-footer .btn-cancel:hover {
    background: #475569 !important;
    border-color: #64748b !important;
}

/* ================================================================
   RADZEN LAYOUT / BODY OVERRIDES FOR DARK MODE
   ================================================================ */

body[data-theme="dark"] .rz-body {
    background-color: #0f172a !important;
}

body[data-theme="dark"] .rz-layout {
    background-color: #0f172a !important;
}

body[data-theme="dark"] .rz-pager button:disabled,
body[data-theme="dark"] .rz-paginator button:disabled {
    opacity: 0.4 !important;
    background-color: transparent !important;
}

body[data-theme="dark"] .rz-pager .rzi,
body[data-theme="dark"] .rz-paginator .rzi {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .rz-grid-footer {
    background-color: #334155 !important;
    border: none !important;
    border-top: 1px solid #475569 !important;
}

/* Filter Row */
body[data-theme="dark"] .rz-filter-row {
    background-color: #334155 !important;
}

body[data-theme="dark"] .rz-filter-row td {
    background-color: #334155 !important;
    border: none !important;
}

/* ================================================================
   INLINE STYLE OVERRIDES FOR COMPONENTS WITH EMBEDDED STYLES
   ================================================================ */

body[data-theme="dark"] .followers-container .followers-label {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .followers-container .follower-tag {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .followers-container .follower-name {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .followers-container .follower-dropdown-name {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .followers-container .follower-dropdown-title {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .followers-container .follower-dropdown-email {
    color: #64748b !important;
}

/* ================================================================
   UTILITY CLASSES FOR RFS DARK MODE
   ================================================================ */

/* Force specific backgrounds */
.rfs-bg-page { background-color: var(--rfs-bg-page) !important; }
.rfs-bg-primary { background-color: var(--rfs-bg-primary) !important; }
.rfs-bg-secondary { background-color: var(--rfs-bg-secondary) !important; }
.rfs-bg-card { background-color: var(--rfs-bg-card) !important; }

/* Force specific text colors */
.rfs-text-primary { color: var(--rfs-text-primary) !important; }
.rfs-text-secondary { color: var(--rfs-text-secondary) !important; }
.rfs-text-muted { color: var(--rfs-text-muted) !important; }

/* Force specific border colors */
.rfs-border { border-color: var(--rfs-border-primary) !important; }