/* RadzenDataGrid Dark Mode Theme CSS */
/* Tích hợp với theme Vuexy hiện tại */
/* IMPORTANT: File này phải được load sau Radzen CSS để override đúng */

/* ===== FORCE OVERRIDE RADZEN DEFAULTS ===== */
/* Sử dụng higher specificity để đảm bảo override */

/* NUCLEAR OPTION: Override tất cả Radzen table styles */
.rz-datatable table,
.rz-datatable .rz-datatable-table,
.rz-datatable .rz-datatable-scrollable-table {
    background-color: inherit !important;
    color: inherit !important;
}

.rz-datatable thead,
.rz-datatable .rz-datatable-thead {
    background-color: inherit !important;
    color: inherit !important;
}

.rz-datatable tbody,
.rz-datatable .rz-datatable-tbody {
    background-color: inherit !important;
    color: inherit !important;
}

.rz-datatable tr,
.rz-datatable .rz-datatable-row {
    background-color: inherit !important;
    color: inherit !important;
}

.rz-datatable th,
.rz-datatable .rz-datatable-header-cell {
    background-color: inherit !important;
    color: inherit !important;
}

.rz-datatable td,
.rz-datatable .rz-datatable-cell {
    background-color: inherit !important;
    color: inherit !important;
}

/* ===== MODERN FLAT DESIGN ===== */
/* Remove all borders for clean modern look */

/* ===== MODERN FLAT DESIGN APPROACH ===== */
/* Clean, borderless, modern table design */

/* Main DataTable Container */
.rz-datatable {
    background-color: var(--bs-card-bg, #fff) !important;
    color: var(--bs-card-color, #6f6b7d) !important;
    border: none !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
}

/* Header Section - Modern flat design */
.rz-datatable-header {
    background: linear-gradient(135deg, var(--bs-body-bg, #f8f7fa) 0%, var(--bs-card-bg, #fff) 100%) !important;
    color: var(--bs-card-color, #5d596c) !important;
    border: none !important;
    border-bottom: 2px solid var(--bs-primary, #696cff) !important;
}

.rz-datatable-header th {
    background: transparent !important;
    color: var(--bs-card-color, #5d596c) !important;
    border: none !important;
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
    font-weight: 600 !important;
    padding: 1rem 0.75rem !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
}

.rz-datatable-header th:last-child {
    border-right: none !important;
}

/* Data Section - Clean rows */
.rz-datatable-data {
    background-color: var(--bs-card-bg, #fff) !important;
}

.rz-datatable-data td {
    background-color: transparent !important;
    color: var(--bs-card-color, #6f6b7d) !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 0.875rem 0.75rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
}

/* Row Hover Effects */
.rz-datatable-data tr {
    transition: all 0.2s ease !important;
}

.rz-datatable-data tr:hover {
    background-color: rgba(105, 108, 255, 0.05) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.rz-datatable-data tr:hover td {
    background-color: transparent !important;
    color: var(--bs-primary, #696cff) !important;
}

/* Remove zebra striping for cleaner look */
.rz-datatable-data tr:nth-child(even) td {
    background-color: transparent !important;
}

.rz-datatable-data tr:nth-child(even):hover td {
    background-color: transparent !important;
    color: var(--bs-primary, #696cff) !important;
}

/* ===== LIGHT MODE ===== */
html.light-style .rz-datatable,
.light-style .rz-datatable,
body.light-style .rz-datatable {
    background-color: #fff !important;
    color: #6f6b7d !important;
    border: 1px solid #dbdade !important;
    border-radius: 0.375rem !important;
}

html.light-style .rz-datatable-header,
.light-style .rz-datatable-header,
body.light-style .rz-datatable-header {
    background-color: #f8f7fa !important;
    color: #5d596c !important;
    border-bottom: 1px solid #dbdade !important;
}

html.light-style .rz-datatable-header th,
.light-style .rz-datatable-header th,
body.light-style .rz-datatable-header th {
    background-color: #f8f7fa !important;
    color: #5d596c !important;
    border-right: 1px solid #dbdade !important;
    font-weight: 600 !important;
    padding: 0.75rem !important;
}

html.light-style .rz-datatable-data,
.light-style .rz-datatable-data,
body.light-style .rz-datatable-data {
    background-color: #fff !important;
}

html.light-style .rz-datatable-data td,
.light-style .rz-datatable-data td,
body.light-style .rz-datatable-data td {
    background-color: #fff !important;
    color: #6f6b7d !important;
    border-bottom: 1px solid #f1f1f2 !important;
    border-right: 1px solid #f1f1f2 !important;
    padding: 0.75rem !important;
}

.light-style .rz-datatable-data tr:hover td {
    background-color: #f8f7fa !important;
}

.light-style .rz-datatable-data tr:nth-child(even) td {
    background-color: #fafafa !important;
}

.light-style .rz-datatable-data tr:nth-child(even):hover td {
    background-color: #f8f7fa !important;
}

/* ===== DARK MODE - MODERN FLAT DESIGN ===== */
html.dark-style .rz-datatable,
.dark-style .rz-datatable,
body.dark-style .rz-datatable,
[data-theme="theme-dark"] .rz-datatable {
    background-color: #2f3349 !important;
    color: #b6bee3 !important;
    border: none !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
}

html.dark-style .rz-datatable-header,
.dark-style .rz-datatable-header,
body.dark-style .rz-datatable-header,
[data-theme="theme-dark"] .rz-datatable-header {
    background: linear-gradient(135deg, #25293c 0%, #2f3349 100%) !important;
    color: #d5dae7 !important;
    border: none !important;
    border-bottom: 2px solid #696cff !important;
}

html.dark-style .rz-datatable-header th,
.dark-style .rz-datatable-header th,
body.dark-style .rz-datatable-header th,
[data-theme="theme-dark"] .rz-datatable-header th {
    background: transparent !important;
    color: #d5dae7 !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-weight: 600 !important;
    padding: 1rem 0.75rem !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
}

html.dark-style .rz-datatable-header th:last-child,
.dark-style .rz-datatable-header th:last-child,
body.dark-style .rz-datatable-header th:last-child,
[data-theme="theme-dark"] .rz-datatable-header th:last-child {
    border-right: none !important;
}

html.dark-style .rz-datatable-data,
.dark-style .rz-datatable-data,
body.dark-style .rz-datatable-data,
[data-theme="theme-dark"] .rz-datatable-data {
    background-color: #2f3349 !important;
}

html.dark-style .rz-datatable-data td,
.dark-style .rz-datatable-data td,
body.dark-style .rz-datatable-data td,
[data-theme="theme-dark"] .rz-datatable-data td {
    background-color: transparent !important;
    color: #b6bee3 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.875rem 0.75rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
}

/* Dark Mode Row Hover Effects */
html.dark-style .rz-datatable-data tr,
.dark-style .rz-datatable-data tr,
body.dark-style .rz-datatable-data tr,
[data-theme="theme-dark"] .rz-datatable-data tr {
    transition: all 0.2s ease !important;
}

html.dark-style .rz-datatable-data tr:hover,
.dark-style .rz-datatable-data tr:hover,
body.dark-style .rz-datatable-data tr:hover,
[data-theme="theme-dark"] .rz-datatable-data tr:hover {
    background-color: rgba(105, 108, 255, 0.15) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html.dark-style .rz-datatable-data tr:hover td,
.dark-style .rz-datatable-data tr:hover td,
body.dark-style .rz-datatable-data tr:hover td,
[data-theme="theme-dark"] .rz-datatable-data tr:hover td {
    background-color: transparent !important;
    color: #8b8fff !important;
}

/* Remove zebra striping in dark mode */
html.dark-style .rz-datatable-data tr:nth-child(even) td,
.dark-style .rz-datatable-data tr:nth-child(even) td,
body.dark-style .rz-datatable-data tr:nth-child(even) td,
[data-theme="theme-dark"] .rz-datatable-data tr:nth-child(even) td {
    background-color: transparent !important;
}

html.dark-style .rz-datatable-data tr:nth-child(even):hover td,
.dark-style .rz-datatable-data tr:nth-child(even):hover td,
body.dark-style .rz-datatable-data tr:nth-child(even):hover td,
[data-theme="theme-dark"] .rz-datatable-data tr:nth-child(even):hover td {
    background-color: transparent !important;
    color: #8b8fff !important;
}

.dark-style .rz-datatable-data tr:hover td {
    background-color: #343852 !important;
}

.dark-style .rz-datatable-data tr:nth-child(even) td {
    background-color: #32364a !important;
}

.dark-style .rz-datatable-data tr:nth-child(even):hover td {
    background-color: #343852 !important;
}

/* ===== MODERN PAGINATION ===== */
/* Light Mode Pagination */
.light-style .rz-paginator {
    background-color: var(--bs-card-bg, #fff) !important;
    color: var(--bs-card-color, #6f6b7d) !important;
    border: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

.light-style .rz-paginator .rz-paginator-page {
    background-color: transparent !important;
    color: var(--bs-card-color, #6f6b7d) !important;
    border: none !important;
    margin: 0 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

.light-style .rz-paginator .rz-paginator-page:hover {
    background-color: rgba(105, 108, 255, 0.1) !important;
    color: var(--bs-primary, #696cff) !important;
    transform: translateY(-1px) !important;
}

.light-style .rz-paginator .rz-paginator-page.rz-state-active {
    background-color: var(--bs-primary, #696cff) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(105, 108, 255, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Dark Mode Pagination */
.dark-style .rz-paginator {
    background-color: #2f3349 !important;
    color: #b6bee3 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

.dark-style .rz-paginator .rz-paginator-page {
    background-color: transparent !important;
    color: #b6bee3 !important;
    border: none !important;
    margin: 0 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

.dark-style .rz-paginator .rz-paginator-page:hover {
    background-color: rgba(105, 108, 255, 0.2) !important;
    color: #8b8fff !important;
    transform: translateY(-1px) !important;
}

.dark-style .rz-paginator .rz-paginator-page.rz-state-active {
    background-color: #696cff !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(105, 108, 255, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* ===== RADZEN FILTER POPUP Z-INDEX FIXES ===== */
/* 
 * VẤN ĐỀ: RadzenDataGrid filter popup có z-index: 2000 (inline style) che khuất dropdown
 * GIẢI PHÁP: Override z-index của popup về 1000, dropdown sẽ có z-index: 2000 (Radzen tự set)
 */

/* Override Radzen inline z-index cho filter popup */
div.rz-overlaypanel[style*="z-index"] {
    z-index: 1000 !important;
    overflow: visible !important;
    background: var(--bs-card-bg, #fff) !important;
    border: 1px solid var(--bs-border-color, #dee2e6) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    padding: 1rem !important;
    min-width: 250px !important;
}

/* Dark mode filter popup */
.dark-style div.rz-overlaypanel[style*="z-index"],
html.dark-style div.rz-overlaypanel[style*="z-index"],
body.dark-style div.rz-overlaypanel[style*="z-index"] {
    background: #2f3349 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Dark mode dropdown items styling */
.dark-style .rz-multiselect-items-wrapper,
.dark-style .rz-dropdown-items-wrapper,
html.dark-style .rz-multiselect-items-wrapper,
html.dark-style .rz-dropdown-items-wrapper,
body.dark-style .rz-multiselect-items-wrapper,
body.dark-style .rz-dropdown-items-wrapper {
    background: #2f3349 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #b6bee3 !important;
}

.dark-style .rz-multiselect-items,
.dark-style .rz-dropdown-items,
html.dark-style .rz-multiselect-items,
html.dark-style .rz-dropdown-items,
body.dark-style .rz-multiselect-items,
body.dark-style .rz-dropdown-items {
    background: #2f3349 !important;
    color: #b6bee3 !important;
}

.dark-style .rz-multiselect-item,
.dark-style .rz-dropdown-item,
html.dark-style .rz-multiselect-item,
html.dark-style .rz-dropdown-item,
body.dark-style .rz-multiselect-item,
body.dark-style .rz-dropdown-item {
    background: transparent !important;
    color: #b6bee3 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.dark-style .rz-multiselect-item:hover,
.dark-style .rz-dropdown-item:hover,
html.dark-style .rz-multiselect-item:hover,
html.dark-style .rz-dropdown-item:hover,
body.dark-style .rz-multiselect-item:hover,
body.dark-style .rz-dropdown-item:hover {
    background: rgba(105, 108, 255, 0.15) !important;
    color: #8b8fff !important;
}

.dark-style .rz-multiselect-item span,
.dark-style .rz-dropdown-item span,
html.dark-style .rz-multiselect-item span,
html.dark-style .rz-dropdown-item span,
body.dark-style .rz-multiselect-item span,
body.dark-style .rz-dropdown-item span {
    color: inherit !important;
}

/* Dark mode multiselect header */
.dark-style .rz-multiselect-header,
html.dark-style .rz-multiselect-header,
body.dark-style .rz-multiselect-header {
    background: #25293c !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #b6bee3 !important;
    padding: 0.5rem !important;
}

.dark-style .rz-multiselect-close,
html.dark-style .rz-multiselect-close,
body.dark-style .rz-multiselect-close {
    color: #b6bee3 !important;
    background: transparent !important;
    border: none !important;
}

.dark-style .rz-multiselect-close:hover,
html.dark-style .rz-multiselect-close:hover,
body.dark-style .rz-multiselect-close:hover {
    color: #8b8fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.dark-style .rz-multiselect-close .rzi,
html.dark-style .rz-multiselect-close .rzi,
body.dark-style .rz-multiselect-close .rzi {
    color: inherit !important;
}

/* Dark mode checkbox styling in dropdown */
.dark-style .rz-chkbox-box,
html.dark-style .rz-chkbox-box,
body.dark-style .rz-chkbox-box {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.dark-style .rz-chkbox-box.rz-state-active,
html.dark-style .rz-chkbox-box.rz-state-active,
body.dark-style .rz-chkbox-box.rz-state-active {
    background: #696cff !important;
    border-color: #696cff !important;
}

.dark-style .rz-chkbox-icon,
html.dark-style .rz-chkbox-icon,
body.dark-style .rz-chkbox-icon {
    color: #fff !important;
}

/* Ensure parent containers don't clip dropdowns */
.rz-datatable,
.rz-datatable-wrapper,
.rz-overlaypanel,
.rz-column-filter-overlay {
    overflow: visible !important;
}

/* Keep scrollable areas functional */
.rz-datatable-scrollable-wrapper,
.rz-datatable-scrollable-body,
.rz-datatable-data {
    overflow: auto !important;
}

/* Filter popup buttons styling */
.rz-column-filter-overlay .rz-button {
    margin: 0.25rem !important;
    border-radius: 0.375rem !important;
}

/* ===== FORCE TEXT COLORS IN ALL ELEMENTS ===== */
/* Light Mode Text Forcing */
.light-style .rz-datatable-data td *,
.light-style .rz-datatable-data td span,
.light-style .rz-datatable-data td div,
.light-style .rz-datatable-data td p,
.light-style .rz-datatable-data td a,
.light-style .rz-datatable-data td code,
.light-style .rz-datatable-data td small,
.light-style .rz-datatable-data td strong,
.light-style .rz-datatable-data td em {
    color: var(--bs-card-color, #6f6b7d) !important;
}

.light-style .rz-datatable-header th *,
.light-style .rz-datatable-header th span,
.light-style .rz-datatable-header th div {
    color: var(--bs-card-color, #5d596c) !important;
}

/* ===== LIGHT MODE BADGE COLORS ===== */
/* Ensure badges keep their colors in light mode too */
.light-style .rz-datatable .badge,
html.light-style .rz-datatable .badge,
body.light-style .rz-datatable .badge {
    color: revert !important;
}

.light-style .rz-datatable .badge-success,
html.light-style .rz-datatable .badge-success,
body.light-style .rz-datatable .badge-success {
    color: #fff !important;
    background-color: #28a745 !important;
}

.light-style .rz-datatable .badge-danger,
html.light-style .rz-datatable .badge-danger,
body.light-style .rz-datatable .badge-danger {
    color: #fff !important;
    background-color: #dc3545 !important;
}

.light-style .rz-datatable .badge-warning,
html.light-style .rz-datatable .badge-warning,
body.light-style .rz-datatable .badge-warning {
    color: #000 !important;
    background-color: #ffc107 !important;
}

.light-style .rz-datatable .badge-info,
html.light-style .rz-datatable .badge-info,
body.light-style .rz-datatable .badge-info {
    color: #fff !important;
    background-color: #17a2b8 !important;
}

.light-style .rz-datatable .badge-primary,
html.light-style .rz-datatable .badge-primary,
body.light-style .rz-datatable .badge-primary {
    color: #fff !important;
    background-color: #696cff !important;
}

.light-style .rz-datatable .badge-secondary,
html.light-style .rz-datatable .badge-secondary,
body.light-style .rz-datatable .badge-secondary {
    color: #fff !important;
    background-color: #6c757d !important;
}

/* Dark Mode Text Forcing - NUCLEAR OPTION */
html.dark-style .rz-datatable-data td,
.dark-style .rz-datatable-data td,
body.dark-style .rz-datatable-data td,
[data-theme="theme-dark"] .rz-datatable-data td,
html.dark-style .rz-datatable-data td *,
.dark-style .rz-datatable-data td *,
body.dark-style .rz-datatable-data td *,
[data-theme="theme-dark"] .rz-datatable-data td *,
html.dark-style .rz-datatable-data td span,
.dark-style .rz-datatable-data td span,
body.dark-style .rz-datatable-data td span,
[data-theme="theme-dark"] .rz-datatable-data td span,
html.dark-style .rz-datatable-data td div,
.dark-style .rz-datatable-data td div,
body.dark-style .rz-datatable-data td div,
[data-theme="theme-dark"] .rz-datatable-data td div,
html.dark-style .rz-datatable-data td p,
.dark-style .rz-datatable-data td p,
body.dark-style .rz-datatable-data td p,
[data-theme="theme-dark"] .rz-datatable-data td p,
html.dark-style .rz-datatable-data td a,
.dark-style .rz-datatable-data td a,
body.dark-style .rz-datatable-data td a,
[data-theme="theme-dark"] .rz-datatable-data td a,
html.dark-style .rz-datatable-data td code,
.dark-style .rz-datatable-data td code,
body.dark-style .rz-datatable-data td code,
[data-theme="theme-dark"] .rz-datatable-data td code,
html.dark-style .rz-datatable-data td small,
.dark-style .rz-datatable-data td small,
body.dark-style .rz-datatable-data td small,
[data-theme="theme-dark"] .rz-datatable-data td small,
html.dark-style .rz-datatable-data td strong,
.dark-style .rz-datatable-data td strong,
body.dark-style .rz-datatable-data td strong,
[data-theme="theme-dark"] .rz-datatable-data td strong,
html.dark-style .rz-datatable-data td em,
.dark-style .rz-datatable-data td em,
body.dark-style .rz-datatable-data td em,
[data-theme="theme-dark"] .rz-datatable-data td em,
html.dark-style .rz-datatable-data .fw-bold,
.dark-style .rz-datatable-data .fw-bold,
body.dark-style .rz-datatable-data .fw-bold,
[data-theme="theme-dark"] .rz-datatable-data .fw-bold,
html.dark-style .rz-datatable-data .text-muted,
.dark-style .rz-datatable-data .text-muted,
body.dark-style .rz-datatable-data .text-muted,
[data-theme="theme-dark"] .rz-datatable-data .text-muted {
    color: #b6bee3 !important;
}

/* Force override Bootstrap text utilities in dark mode */
html.dark-style .rz-datatable .text-muted,
.dark-style .rz-datatable .text-muted,
body.dark-style .rz-datatable .text-muted,
[data-theme="theme-dark"] .rz-datatable .text-muted {
    color: #8a92b2 !important;
}

html.dark-style .rz-datatable .fw-bold,
.dark-style .rz-datatable .fw-bold,
body.dark-style .rz-datatable .fw-bold,
[data-theme="theme-dark"] .rz-datatable .fw-bold {
    color: #d5dae7 !important;
}

/* ===== ULTIMATE NUCLEAR OPTION FOR DARK MODE TEXT ===== */
/* Force ALL text elements in RadzenDataGrid to use light colors in dark mode */
html.dark-style .rz-datatable,
.dark-style .rz-datatable,
body.dark-style .rz-datatable,
[data-theme="theme-dark"] .rz-datatable {
    color: #b6bee3 !important;
}

html.dark-style .rz-datatable *,
.dark-style .rz-datatable *,
body.dark-style .rz-datatable *,
[data-theme="theme-dark"] .rz-datatable * {
    color: inherit !important;
}

/* ===== EXCLUDE BADGES AND BUTTONS FROM TEXT FORCING ===== */
/* Badges should keep their original colors */
html.dark-style .rz-datatable .badge,
.dark-style .rz-datatable .badge,
body.dark-style .rz-datatable .badge,
[data-theme="theme-dark"] .rz-datatable .badge,
html.dark-style .rz-datatable .btn,
.dark-style .rz-datatable .btn,
body.dark-style .rz-datatable .btn,
[data-theme="theme-dark"] .rz-datatable .btn {
    color: revert !important;
}

/* Specific badge color overrides */
html.dark-style .rz-datatable .badge-success,
.dark-style .rz-datatable .badge-success,
body.dark-style .rz-datatable .badge-success,
[data-theme="theme-dark"] .rz-datatable .badge-success {
    color: #fff !important;
    background-color: #28a745 !important;
}

html.dark-style .rz-datatable .badge-danger,
.dark-style .rz-datatable .badge-danger,
body.dark-style .rz-datatable .badge-danger,
[data-theme="theme-dark"] .rz-datatable .badge-danger {
    color: #fff !important;
    background-color: #dc3545 !important;
}

html.dark-style .rz-datatable .badge-warning,
.dark-style .rz-datatable .badge-warning,
body.dark-style .rz-datatable .badge-warning,
[data-theme="theme-dark"] .rz-datatable .badge-warning {
    color: #000 !important;
    background-color: #ffc107 !important;
}

html.dark-style .rz-datatable .badge-info,
.dark-style .rz-datatable .badge-info,
body.dark-style .rz-datatable .badge-info,
[data-theme="theme-dark"] .rz-datatable .badge-info {
    color: #fff !important;
    background-color: #17a2b8 !important;
}

html.dark-style .rz-datatable .badge-primary,
.dark-style .rz-datatable .badge-primary,
body.dark-style .rz-datatable .badge-primary,
[data-theme="theme-dark"] .rz-datatable .badge-primary {
    color: #fff !important;
    background-color: #696cff !important;
}

html.dark-style .rz-datatable .badge-secondary,
.dark-style .rz-datatable .badge-secondary,
body.dark-style .rz-datatable .badge-secondary,
[data-theme="theme-dark"] .rz-datatable .badge-secondary {
    color: #fff !important;
    background-color: #6c757d !important;
}

/* Override specific Bootstrap classes that might interfere */
html.dark-style .rz-datatable .text-dark,
.dark-style .rz-datatable .text-dark,
body.dark-style .rz-datatable .text-dark,
[data-theme="theme-dark"] .rz-datatable .text-dark {
    color: #b6bee3 !important;
}

html.dark-style .rz-datatable .text-body,
.dark-style .rz-datatable .text-body,
body.dark-style .rz-datatable .text-body,
[data-theme="theme-dark"] .rz-datatable .text-body {
    color: #b6bee3 !important;
}

html.dark-style .rz-datatable-header th *,
.dark-style .rz-datatable-header th *,
body.dark-style .rz-datatable-header th *,
[data-theme="theme-dark"] .rz-datatable-header th *,
html.dark-style .rz-datatable-header th span,
.dark-style .rz-datatable-header th span,
body.dark-style .rz-datatable-header th span,
[data-theme="theme-dark"] .rz-datatable-header th span,
html.dark-style .rz-datatable-header th div,
.dark-style .rz-datatable-header th div,
body.dark-style .rz-datatable-header th div,
[data-theme="theme-dark"] .rz-datatable-header th div {
    color: #d5dae7 !important;
}

/* ===== FILTER POPUP ===== */
/* Light Mode Filter */
.light-style .rz-overlaypanel {
    background-color: #fff !important;
    color: #6f6b7d !important;
    border: 1px solid #dbdade !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45) !important;
}

.light-style .rz-overlaypanel .rz-overlaypanel-content {
    background-color: #fff !important;
    color: #6f6b7d !important;
    padding: 1rem !important;
}

/* Dark Mode Filter */
.dark-style .rz-overlaypanel {
    background-color: #2f3349 !important;
    color: #b6bee3 !important;
    border: 1px solid #434968 !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.25rem 1rem rgba(20, 21, 33, 0.6) !important;
}

.dark-style .rz-overlaypanel .rz-overlaypanel-content {
    background-color: #2f3349 !important;
    color: #b6bee3 !important;
    padding: 1rem !important;
}

/* ===== DROPDOWN IN FILTER ===== */
/* Light Mode Dropdown */
.light-style .rz-dropdown {
    background-color: #fff !important;
    color: #6f6b7d !important;
    border: 1px solid #dbdade !important;
    border-radius: 0.25rem !important;
}

.light-style .rz-dropdown-panel {
    background-color: #fff !important;
    color: #6f6b7d !important;
    border: 1px solid #dbdade !important;
    border-radius: 0.25rem !important;
    box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45) !important;
}

.light-style .rz-dropdown-item {
    background-color: transparent !important;
    color: #6f6b7d !important;
    padding: 0.5rem 0.75rem !important;
}

.light-style .rz-dropdown-item:hover {
    background-color: #f8f7fa !important;
    color: #5d596c !important;
}

/* Dark Mode Dropdown */
.dark-style .rz-dropdown {
    background-color: #2f3349 !important;
    color: #b6bee3 !important;
    border: 1px solid #434968 !important;
    border-radius: 0.25rem !important;
}

.dark-style .rz-dropdown-panel {
    background-color: #2f3349 !important;
    color: #b6bee3 !important;
    border: 1px solid #434968 !important;
    border-radius: 0.25rem !important;
    box-shadow: 0 0.25rem 1rem rgba(20, 21, 33, 0.6) !important;
}

.dark-style .rz-dropdown-item {
    background-color: transparent !important;
    color: #b6bee3 !important;
    padding: 0.5rem 0.75rem !important;
}

.dark-style .rz-dropdown-item:hover {
    background-color: #343852 !important;
    color: #d5dae7 !important;
}

/* ===== TEXTBOX IN FILTER ===== */
/* Light Mode TextBox */
.light-style .rz-textbox {
    background-color: #fff !important;
    color: #6f6b7d !important;
    border: 1px solid #dbdade !important;
    border-radius: 0.25rem !important;
    padding: 0.4375rem 0.875rem !important;
}

.light-style .rz-textbox:focus {
    border-color: #696cff !important;
    box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.25) !important;
}

/* Dark Mode TextBox */
.dark-style .rz-textbox {
    background-color: #2f3349 !important;
    color: #b6bee3 !important;
    border: 1px solid #434968 !important;
    border-radius: 0.25rem !important;
    padding: 0.4375rem 0.875rem !important;
}

.dark-style .rz-textbox:focus {
    border-color: #696cff !important;
    box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.25) !important;
}

/* ===== CHECKBOX ===== */
/* Light Mode Checkbox */
.light-style .rz-chkbox {
    background-color: #fff !important;
    border: 1px solid #dbdade !important;
    border-radius: 0.25rem !important;
}

.light-style .rz-chkbox.rz-state-active {
    background-color: #696cff !important;
    border-color: #696cff !important;
}

/* Dark Mode Checkbox */
.dark-style .rz-chkbox {
    background-color: #2f3349 !important;
    border: 1px solid #434968 !important;
    border-radius: 0.25rem !important;
}

.dark-style .rz-chkbox.rz-state-active {
    background-color: #696cff !important;
    border-color: #696cff !important;
}

/* ===== LOADING INDICATOR ===== */
/* Light Mode Loading */
.light-style .rz-datatable .rz-datatable-loading-overlay {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

.light-style .rz-datatable .rz-datatable-loading {
    color: #6f6b7d !important;
}

/* Dark Mode Loading */
.dark-style .rz-datatable .rz-datatable-loading-overlay {
    background-color: rgba(47, 51, 73, 0.8) !important;
}

.dark-style .rz-datatable .rz-datatable-loading {
    color: #b6bee3 !important;
}

/* ===== SORT INDICATORS ===== */
/* Light Mode Sort */
.light-style .rz-sortable-column-icon {
    color: #a8aaae !important;
}

.light-style .rz-sortable-column-icon.rz-sort-asc,
.light-style .rz-sortable-column-icon.rz-sort-desc {
    color: #696cff !important;
}

/* Dark Mode Sort */
.dark-style .rz-sortable-column-icon {
    color: #7c7f96 !important;
}

.dark-style .rz-sortable-column-icon.rz-sort-asc,
.dark-style .rz-sortable-column-icon.rz-sort-desc {
    color: #696cff !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    .rz-datatable-header th,
    .rz-datatable-data td {
        padding: 0.5rem !important;
        font-size: 0.875rem !important;
    }
}

/* ===== SELECTION STYLES ===== */
/* Light Mode Selection */
.light-style .rz-datatable-data tr.rz-state-highlight td {
    background-color: rgba(105, 108, 255, 0.1) !important;
    color: #5d596c !important;
}

/* Dark Mode Selection */
.dark-style .rz-datatable-data tr.rz-state-highlight td {
    background-color: rgba(105, 108, 255, 0.2) !important;
    color: #d5dae7 !important;
}

/* ===== FILTER BUTTON ===== */
/* Light Mode Filter Button */
.light-style .rz-column-filter-button {
    background-color: transparent !important;
    color: #a8aaae !important;
    border: none !important;
}

.light-style .rz-column-filter-button:hover {
    background-color: #f8f7fa !important;
    color: #5d596c !important;
}

.light-style .rz-column-filter-button.rz-state-active {
    color: #696cff !important;
}

/* Dark Mode Filter Button */
.dark-style .rz-column-filter-button {
    background-color: transparent !important;
    color: #7c7f96 !important;
    border: none !important;
}

.dark-style .rz-column-filter-button:hover {
    background-color: #343852 !important;
    color: #d5dae7 !important;
}

.dark-style .rz-column-filter-button.rz-state-active {
    color: #696cff !important;
}

/* ===== ADDITIONAL RADZEN COMPONENTS ===== */
/* Numeric Input */
.light-style .rz-numeric {
    background-color: #fff !important;
    color: #6f6b7d !important;
    border: 1px solid #dbdade !important;
    border-radius: 0.25rem !important;
}

.dark-style .rz-numeric {
    background-color: #2f3349 !important;
    color: #b6bee3 !important;
    border: 1px solid #434968 !important;
    border-radius: 0.25rem !important;
}

/* Button trong DataGrid */
.light-style .rz-button {
    background-color: #696cff !important;
    color: #fff !important;
    border: 1px solid #696cff !important;
    border-radius: 0.25rem !important;
}

.light-style .rz-button:hover {
    background-color: #5f61e6 !important;
    border-color: #5f61e6 !important;
}

.dark-style .rz-button {
    background-color: #696cff !important;
    color: #fff !important;
    border: 1px solid #696cff !important;
    border-radius: 0.25rem !important;
}

.dark-style .rz-button:hover {
    background-color: #5f61e6 !important;
    border-color: #5f61e6 !important;
}

/* Secondary Button */
.light-style .rz-button.rz-button-secondary {
    background-color: #8592a3 !important;
    border-color: #8592a3 !important;
}

.dark-style .rz-button.rz-button-secondary {
    background-color: #8592a3 !important;
    border-color: #8592a3 !important;
}

/* ===== SCROLLBAR STYLING ===== */
/* Light Mode Scrollbar */
.light-style .rz-datatable-scrollable-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.light-style .rz-datatable-scrollable-body::-webkit-scrollbar-track {
    background: #f1f1f2;
    border-radius: 4px;
}

.light-style .rz-datatable-scrollable-body::-webkit-scrollbar-thumb {
    background: #dbdade;
    border-radius: 4px;
}

.light-style .rz-datatable-scrollable-body::-webkit-scrollbar-thumb:hover {
    background: #c7c8cc;
}

/* Dark Mode Scrollbar */
.dark-style .rz-datatable-scrollable-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark-style .rz-datatable-scrollable-body::-webkit-scrollbar-track {
    background: #3a3f5c;
    border-radius: 4px;
}

.dark-style .rz-datatable-scrollable-body::-webkit-scrollbar-thumb {
    background: #434968;
    border-radius: 4px;
}

.dark-style .rz-datatable-scrollable-body::-webkit-scrollbar-thumb:hover {
    background: #4f5574;
}

/* ===== EMPTY STATE ===== */
.light-style .rz-datatable-emptymessage {
    background-color: #fff !important;
    color: #a8aaae !important;
    text-align: center !important;
    padding: 2rem !important;
}

.dark-style .rz-datatable-emptymessage {
    background-color: #2f3349 !important;
    color: #7c7f96 !important;
    text-align: center !important;
    padding: 2rem !important;
}

/* ===== FOCUS STATES ===== */
.light-style .rz-datatable th:focus,
.light-style .rz-datatable td:focus {
    outline: 2px solid #696cff !important;
    outline-offset: -2px !important;
}

.dark-style .rz-datatable th:focus,
.dark-style .rz-datatable td:focus {
    outline: 2px solid #696cff !important;
    outline-offset: -2px !important;
}

/* ===== INTEGRATION WITH VUEXY COMPONENTS ===== */
/* Đảm bảo RadzenDataGrid hoạt động tốt với Card component */
.card .rz-datatable {
    border: none !important;
    border-radius: 0 !important;
}

.card .rz-datatable-header th:first-child {
    border-top-left-radius: 0 !important;
}

.card .rz-datatable-header th:last-child {
    border-top-right-radius: 0 !important;
}

/* ===== RESPONSIVE IMPROVEMENTS ===== */
@media (max-width: 576px) {
    .rz-datatable-header th,
    .rz-datatable-data td {
        padding: 0.375rem !important;
        font-size: 0.8125rem !important;
    }
    
    .rz-paginator {
        padding: 0.5rem !important;
    }
    
    .rz-paginator .rz-paginator-page {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
.rz-datatable th[aria-sort="ascending"]:after {
    content: " ↑";
    color: #696cff !important;
}

.rz-datatable th[aria-sort="descending"]:after {
    content: " ↓";
    color: #696cff !important;
}

/* ===== LOADING STATE IMPROVEMENTS ===== */
.light-style .rz-datatable .rz-datatable-loading-mask {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.dark-style .rz-datatable .rz-datatable-loading-mask {
    background-color: rgba(47, 51, 73, 0.9) !important;
}

/* ===== CUSTOM ANIMATIONS ===== */
.rz-datatable-data tr {
    transition: background-color 0.2s ease !important;
}

.rz-paginator .rz-paginator-page {
    transition: all 0.2s ease !important;
}

.rz-dropdown-item {
    transition: background-color 0.15s ease !important;
}

/* ===== PRINT STYLES ===== */
@media print {
    .rz-datatable {
        border: 1px solid #000 !important;
    }
    
    .rz-datatable-header th {
        background-color: #f0f0f0 !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }
    
    .rz-datatable-data td {
        background-color: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }
    
    .rz-paginator {
        display: none !important;
    }
}

/* ===== BOOTSTRAP BADGE VARIANTS ===== */
/* Support for bg-* classes */
html.dark-style .rz-datatable .bg-success,
.dark-style .rz-datatable .bg-success,
body.dark-style .rz-datatable .bg-success,
[data-theme="theme-dark"] .rz-datatable .bg-success,
.light-style .rz-datatable .bg-success,
html.light-style .rz-datatable .bg-success,
body.light-style .rz-datatable .bg-success {
    color: #fff !important;
    background-color: #28a745 !important;
}

html.dark-style .rz-datatable .bg-danger,
.dark-style .rz-datatable .bg-danger,
body.dark-style .rz-datatable .bg-danger,
[data-theme="theme-dark"] .rz-datatable .bg-danger,
.light-style .rz-datatable .bg-danger,
html.light-style .rz-datatable .bg-danger,
body.light-style .rz-datatable .bg-danger {
    color: #fff !important;
    background-color: #dc3545 !important;
}

html.dark-style .rz-datatable .bg-warning,
.dark-style .rz-datatable .bg-warning,
body.dark-style .rz-datatable .bg-warning,
[data-theme="theme-dark"] .rz-datatable .bg-warning,
.light-style .rz-datatable .bg-warning,
html.light-style .rz-datatable .bg-warning,
body.light-style .rz-datatable .bg-warning {
    color: #000 !important;
    background-color: #ffc107 !important;
}

html.dark-style .rz-datatable .bg-info,
.dark-style .rz-datatable .bg-info,
body.dark-style .rz-datatable .bg-info,
[data-theme="theme-dark"] .rz-datatable .bg-info,
.light-style .rz-datatable .bg-info,
html.light-style .rz-datatable .bg-info,
body.light-style .rz-datatable .bg-info {
    color: #fff !important;
    background-color: #17a2b8 !important;
}

html.dark-style .rz-datatable .bg-primary,
.dark-style .rz-datatable .bg-primary,
body.dark-style .rz-datatable .bg-primary,
[data-theme="theme-dark"] .rz-datatable .bg-primary,
.light-style .rz-datatable .bg-primary,
html.light-style .rz-datatable .bg-primary,
body.light-style .rz-datatable .bg-primary {
    color: #fff !important;
    background-color: #696cff !important;
}

html.dark-style .rz-datatable .bg-secondary,
.dark-style .rz-datatable .bg-secondary,
body.dark-style .rz-datatable .bg-secondary,
[data-theme="theme-dark"] .rz-datatable .bg-secondary,
.light-style .rz-datatable .bg-secondary,
html.light-style .rz-datatable .bg-secondary,
body.light-style .rz-datatable .bg-secondary {
    color: #fff !important;
    background-color: #6c757d !important;
}