/*
BBind SaaS - Notification System Styles
Modern notification center with ShadCN design system
*/

/* Notification Center Overlay */
.notification-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300;
}

.notification-overlay.hidden {
    @apply opacity-0 pointer-events-none;
}

/* Notification Center Panel - ShadCN compliant */
.notification-center {
    @apply fixed top-0 right-0 h-full w-96 shadow-2xl transform transition-transform duration-300 z-50;
    @apply border-l overflow-hidden;
    background: hsl(0 0% 3.9%); /* ShadCN background */
    border-color: hsl(0 0% 14.9%); /* ShadCN border */
}

.notification-center.closed {
    @apply translate-x-full;
}

/* Notification Items - Remove blue tint */
.notification-item {
    @apply last:border-b-0 transition-all duration-200;
    border-bottom: 1px solid hsl(0 0% 14.9%); /* ShadCN border */
}

.notification-item:hover {
    background: hsl(0 0% 14.9% / 0.5); /* ShadCN muted */
}

.notification-item.unread {
    background: hsl(0 0% 14.9% / 0.3); /* ShadCN muted lighter */
    border-left: 4px solid hsl(0 0% 98%); /* White border instead of blue */
}

.notification-item.read {
    @apply opacity-75;
}

/* Toast Notifications */
.toast-container {
    @apply fixed top-4 right-4 z-50 space-y-2;
}

.toast {
    @apply max-w-sm w-full shadow-lg rounded-lg pointer-events-auto ring-1;
    background: hsl(0 0% 3.9%); /* ShadCN card */
    border-color: hsl(0 0% 14.9%); /* ShadCN border */
}

.toast.entering {
    @apply translate-x-full opacity-0;
}

.toast.entered {
    @apply translate-x-0 opacity-100;
}

.toast.exiting {
    @apply translate-x-full opacity-0;
}

/* Toast Types - Remove blue, use neutral colors */
.toast.info {
    border-color: hsl(0 0% 63.9%); /* ShadCN muted-foreground */
}

.toast.success {
    border-color: hsl(142 76% 36%); /* Green */
}

.toast.warning {
    border-color: hsl(38 92% 50%); /* Yellow */
}

.toast.error {
    border-color: hsl(0 84% 60%); /* Red */
}

/* Notification Bell Animation */
.notification-bell {
    @apply relative transition-all duration-200;
}

.notification-bell:hover {
    @apply scale-110;
}

.notification-bell.has-notifications {
    @apply animate-pulse;
}

.notification-badge {
    @apply absolute -top-1 -right-1 h-5 w-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center;
    @apply animate-bounce;
}

/* Loading States */
.notification-skeleton {
    @apply animate-pulse;
}

.notification-skeleton .skeleton-line {
    background: hsl(0 0% 14.9%); /* ShadCN muted */
    @apply rounded h-4 mb-2;
}

/* Responsive Design */
@media (max-width: 768px) {
    .notification-center {
        @apply w-full;
    }
    
    .toast-container {
        @apply left-4 right-4;
    }
    
    .toast {
        @apply max-w-none;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .notification-center {
        background: hsl(0 0% 3.9%); /* ShadCN background */
    }
}