/*
 * Override Filament's gray palette for frontend components in dark mode.
 *
 * In Filament's dark mode, gray vars are used INVERSELY:
 *   --gray-900/950  = dark backgrounds (table container, dropdowns)
 *   --gray-50/100   = lighter backgrounds (hover, striped rows)
 *   --gray-200-500  = text colors (light on dark)
 *   --gray-600-700  = headings / strong text
 *
 * We remap to our branded purple scale accordingly.
 */
.dark .fi-ta,
.dark .fi-no,
.dark .fi-modal,
.dark .fi-ac {
    /* Backgrounds: high grays → dark purples */
    --gray-950: #1d1d62;  /* primary-800 — deepest bg */
    --gray-900: #292989;  /* primary-700 — table container bg */
    --gray-800: #292989;  /* primary-700 */

    /* Subtle backgrounds: low grays → slightly lighter purples */
    --gray-100: #3535b1;  /* primary-600 — hover/stripe bg */
    --gray-50: #3535b1;   /* primary-600 — hover/active bg */

    /* Borders */
    --gray-200: #3535b1;  /* primary-600 — borders, dividers */
    --gray-300: #6D6DD6;  /* primary-400 — subtle borders */

    /* Text: mid grays → light text on dark bg */
    --gray-400: #9d9de2;  /* primary-300 — muted/placeholder */
    --gray-500: #c4c4ed;  /* primary-200 — secondary text */
    --gray-600: #ebebf9;  /* primary-100 — body text */
    --gray-700: #ffffff;  /* white — headings */

    /* Same for --color-gray-* (used by Tailwind utility references) */
    --color-gray-950: #1d1d62;
    --color-gray-900: #292989;
    --color-gray-800: #292989;
    --color-gray-100: #3535b1;
    --color-gray-50: #3535b1;
    --color-gray-200: #3535b1;
    --color-gray-300: #6D6DD6;
    --color-gray-400: #9d9de2;
    --color-gray-500: #c4c4ed;
    --color-gray-600: #ebebf9;
    --color-gray-700: #ffffff;
}

/*
 * Buttons: make them solid and visible on dark purple backgrounds.
 * Filament uses color-mix with 5-10% opacity by default in dark mode,
 * which is nearly invisible on our purple bg.
 */
.dark .fi-ta .fi-btn:not(.fi-outlined):not(.fi-color) {
    background-color: #3535b1;
    color: #ffffff;
}
.dark .fi-ta .fi-btn:not(.fi-outlined):not(.fi-color):hover {
    background-color: #6D6DD6;
}

/* Colored buttons (danger, success, etc) — make them solid */
.dark .fi-ta .fi-btn:not(.fi-outlined).fi-color {
    background-color: var(--color-500);
    color: #ffffff;
}
.dark .fi-ta .fi-btn:not(.fi-outlined).fi-color:hover {
    background-color: var(--color-600);
}

/*
 * Badges: make them more opaque/visible on dark purple backgrounds.
 */
.dark .fi-ta .fi-badge:not(.fi-color) {
    background-color: #3535b1;
    color: #ebebf9;
    --tw-ring-color: #6D6DD6;
}

.dark .fi-ta .fi-badge.fi-color {
    background-color: color-mix(in oklab, var(--color-400) 25%, transparent);
    color: var(--color-300);
    --tw-ring-color: color-mix(in oklab, var(--color-400) 40%, transparent);
}

/*
 * Pagination: text, select & per-page dropdown
 */
.dark .fi-ta .fi-pagination-overview {
    color: #c4c4ed;
}

.dark .fi-ta .fi-pagination select,
.dark .fi-ta .fi-ta-page-select {
    background-color: #292989;
    border-color: #3535b1;
    color: #ebebf9;
}