/**
 * Filament admin: invert toast/notification colors vs panel theme so alerts
 * stay readable (light popup on dark panel, dark popup on light panel).
 */

/* Light panel → dark notification card (base; overridden below when .dark is active) */
.fi-no-notification:not(.fi-inline) {
    background-color: rgb(17 24 39) !important;
    --tw-ring-color: rgb(255 255 255 / 0.1);
}

.fi-no-notification:not(.fi-inline).fi-color {
    background-color: color-mix(in oklab, rgb(17 24 39) 90%, var(--color-400)) !important;
    --tw-ring-color: color-mix(in oklab, var(--color-400) 30%, transparent);
}

.fi-no-notification .fi-no-notification-title {
    color: #fff !important;
}

.fi-no-notification .fi-no-notification-date,
.fi-no-notification:not(.fi-color) .fi-no-notification-body {
    color: rgb(156 163 175) !important;
}

.fi-no-notification.fi-color .fi-no-notification-body {
    color: rgb(209 213 219 / 0.75) !important;
}

.fi-no-notification .fi-no-notification-icon:not(.fi-color) {
    color: rgb(156 163 175) !important;
}

/* Dark panel → light notification card */
.dark .fi-no-notification:not(.fi-inline) {
    background-color: #fff !important;
    --tw-ring-color: rgb(3 7 18 / 0.05);
}

.dark .fi-no-notification:not(.fi-inline).fi-color {
    background-color: color-mix(in oklab, #fff 90%, var(--color-400)) !important;
    --tw-ring-color: color-mix(in oklab, var(--color-600) 20%, transparent);
}

.dark .fi-no-notification .fi-no-notification-title {
    color: rgb(3 7 18) !important;
}

.dark .fi-no-notification .fi-no-notification-date,
.dark .fi-no-notification:not(.fi-color) .fi-no-notification-body {
    color: rgb(107 114 128) !important;
}

.dark .fi-no-notification.fi-color .fi-no-notification-body {
    color: rgb(55 65 81 / 0.75) !important;
}

.dark .fi-no-notification .fi-no-notification-icon:not(.fi-color) {
    color: rgb(156 163 175) !important;
}