fix header dropdown

app/assets/stylesheets/components/flash.css

@@ -1,39 +1,70 @@
-/* Flash Messages - Theme Integration */
-.flash-message {
-  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-4;
+.notification {
+  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
+  box-shadow: var(--shadow-lg);
+  border: 1px solid;
+  transition: all var(--duration-normal, 0.3s) ease-out;
 }
 
-/* Base styles for all flash messages */
-.flash-message .flex {
-  @apply rounded-md p-4 border shadow-md;
+.notification-icon {
+  min-width: 20px;
+  height: 20px;
 }
 
-/* Success message styles */
-.flash-message-success {
-  @apply bg-green-50 border-green-100 text-green-800;
+.notification-icon i {
+  color: currentColor !important;
 }
 
-/* Error message styles */
-.flash-message-error {
-  @apply bg-red-50 border-red-100 text-red-800;
+.notification-success {
+  background: var(--color-success-light, #dcfce7);
+  color: var(--color-success-dark, #15803d);
+  border-color: var(--color-success, #22c55e);
 }
 
-/* Warning message styles */
-.flash-message-warning {
-  @apply bg-yellow-50 border-yellow-100 text-yellow-800;
+.notification-warning {
+  background: var(--color-warning-light, #fef3c7);
+  color: var(--color-warning-dark, #92400e);
+  border-color: var(--color-warning, #f59e0b);
 }
 
-/* Info message styles */
-.flash-message-info {
-  @apply bg-blue-50 border-blue-100 text-blue-800;
+.notification-error {
+  background: var(--color-danger-light, #fecaca);
+  color: var(--color-danger-dark, #dc2626);
+  border-color: var(--color-danger, #ef4444);
 }
 
-/* Notice message styles */
-.flash-message-notice {
-  @apply bg-purple-50 border-purple-100 text-purple-800;
+.notification-info {
+  background: var(--color-primary-50, #f0f9ff);
+  color: var(--color-primary-800, #1e40af);
+  border-color: var(--color-primary-200, #bfdbfe);
 }
 
-/* Alert message styles */
-.flash-message-alert {
-  @apply bg-red-50 border-red-100 text-red-800;
+/* Fallback colors if CSS variables are not available */
+.notification-success {
+  background: #dcfce7;
+  color: #15803d;
+  border-color: #22c55e;
 }
+
+.notification-warning {
+  background: #fef3c7;
+  color: #92400e;
+  border-color: #f59e0b;
+}
+
+.notification-error {
+  background: #fecaca;
+  color: #dc2626;
+  border-color: #ef4444;
+}
+
+.notification-info {
+  background: #f0f9ff;
+  color: #1e40af;
+  border-color: #bfdbfe;
+}
+
+/* Animation for fade out */
+.flash-messages-container .notification.opacity-0 {
+  opacity: 0;
+  transform: translateY(-10px);
+}