.fancy-grid-container {
    @apply relative w-full rounded-lg bg-background;
}

.fancy-grid-header {
    @apply flex items-center justify-between border-b bg-muted/40 px-6 py-4;
}

    .fancy-grid-header h3 {
        @apply text-lg font-semibold tracking-tight;
    }

/* DevExpress Grid Customization */
:global(.dx-datagrid) {
    @apply bg-transparent border-none;
}

:global(.dx-datagrid-headers) {
    @apply bg-muted/60 border-b;
}

:global(.dx-datagrid-rowsview) {
    @apply bg-card;
}

:global(.dx-datagrid-pager) {
    @apply bg-muted/40 border-t py-2;
}

:global(.dx-button) {
    @apply transition-colors hover:opacity-80;
}

/* Row hover effect */
:global(.dx-data-row:hover) {
    @apply bg-muted/50;
}

/* Filter row styling */
:global(.dx-datagrid-filter-row) {
    @apply bg-background/95 backdrop-blur-sm;
}

/* Dark mode support */
.dark :global(.dx-datagrid) {
    @apply text-foreground;
}

.dark :global(.dx-datagrid-headers) {
    @apply bg-muted/20;
}

.dark :global(.dx-datagrid-rowsview) {
    @apply bg-card/50;
}

.dark :global(.dx-datagrid-filter-row) {
    @apply bg-background/80;
}