/* ============================================================================
   NOTIFICATION SYSTEM STYLES
   ============================================================================ */

/* Toast notification animations */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

.animate-slide-out-right {
  animation: slideOutRight 0.3s ease-in;
}

/* Notification item hover effects */
.notification-item {
  transition: background-color 0.2s ease;
}

.notification-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

@media (prefers-color-scheme: dark) {
  .notification-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }
}

/* Toast container - positioned top right, above all content */
/* Hidden by default to prevent flash on page load */
#toast-container {
  position: fixed;
  top: 80px; /* Below header */
  right: 16px;
  z-index: 99999; /* Above modals, drawers, everything */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 400px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-in;
}

/* Only show toast container when it has content and is ready */
#toast-container.ready {
  opacity: 1;
}

/* Ensure container is visible when it has toasts */
#toast-container:has(> *) {
  opacity: 1;
}

#toast-container > * {
  pointer-events: all;
}

/* Individual toast styling - solid white background by default */
#toast-container > div {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
  min-width: 320px;
  max-width: 100%;
  border-left-width: 4px;
  border-left-style: solid;
}

/* Force text colors for toast content */
#toast-container .text-mono,
#toast-container .text-secondary-foreground,
#toast-container .text-sm {
  color: #374151 !important;
}

#toast-container .text-muted-foreground {
  color: #6b7280 !important;
}

/* Dark mode toast - only when .dark class is on html/body */
html.dark #toast-container > div,
body.dark #toast-container > div,
[data-kt-theme-mode="dark"] #toast-container > div {
  background-color: #1e293b !important;
  color: #f3f4f6 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.2);
}

html.dark #toast-container .text-mono,
html.dark #toast-container .text-secondary-foreground,
html.dark #toast-container .text-sm,
body.dark #toast-container .text-mono,
body.dark #toast-container .text-secondary-foreground,
body.dark #toast-container .text-sm {
  color: #e5e7eb !important;
}

html.dark #toast-container .text-muted-foreground,
body.dark #toast-container .text-muted-foreground {
  color: #9ca3af !important;
}

/* Warning toast - orange/amber styling */
#toast-container > div.toast-warning,
#toast-container > div.kt-alert-warning,
#toast-container > div[class*="warning"] {
  border-left-color: #f59e0b !important;
  background-color: #fffbeb !important; /* amber-50 */
}

#toast-container > div.toast-warning .text-mono,
#toast-container > div.kt-alert-warning .text-mono,
#toast-container > div[class*="warning"] .text-mono {
  color: #92400e !important; /* amber-800 */
}

#toast-container > div.toast-warning .text-secondary-foreground,
#toast-container > div.toast-warning .text-sm {
  color: #78350f !important; /* amber-900 */
}

/* Error toast - red styling - VERY OBVIOUS */
#toast-container > div.toast-error,
#toast-container > div.kt-alert-destructive,
#toast-container > div[class*="destructive"] {
  border-left-color: #dc2626 !important;
  background-color: #fef2f2 !important; /* red-50 */
  border-left-width: 5px;
}

#toast-container > div.toast-error .text-mono,
#toast-container > div.kt-alert-destructive .text-mono,
#toast-container > div[class*="destructive"] .text-mono {
  color: #991b1b !important; /* red-800 */
}

#toast-container > div.toast-error .text-secondary-foreground,
#toast-container > div.kt-alert-destructive .text-secondary-foreground,
#toast-container > div[class*="destructive"] .text-secondary-foreground {
  color: #b91c1c !important; /* red-700 */
}

/* Success toast - green styling */
#toast-container > div.toast-success,
#toast-container > div[class*="success"],
#toast-container > div[class*="green"] {
  border-left-color: #22c55e !important;
  background-color: #f0fdf4 !important; /* green-50 */
}

#toast-container > div.toast-success .text-mono,
#toast-container > div[class*="success"] .text-mono,
#toast-container > div[class*="green"] .text-mono {
  color: #166534 !important; /* green-800 */
}

/* Info toast - blue styling */
#toast-container > div.toast-info,
#toast-container > div.kt-alert-primary,
#toast-container > div[class*="primary"] {
  border-left-color: #3b82f6 !important;
  background-color: #eff6ff !important; /* blue-50 */
}

#toast-container > div.toast-info .text-mono,
#toast-container > div.kt-alert-primary .text-mono,
#toast-container > div[class*="primary"] .text-mono {
  color: #1e40af !important; /* blue-800 */
}

/* Icon colors inside toasts */
#toast-container .text-red-500,
#toast-container .ki-cross,
#toast-container .ki-cross-circle {
  color: #dc2626 !important;
}

#toast-container .text-orange-400,
#toast-container .ki-watch,
#toast-container .ki-information-2 {
  color: #f59e0b !important;
}

#toast-container .text-green-500,
#toast-container .ki-check,
#toast-container .ki-check-circle {
  color: #22c55e !important;
}

#toast-container .text-blue-500,
#toast-container .ki-information {
  color: #3b82f6 !important;
}

/* Progress bar animation */
.notification-progress-bar {
  transition: width 0.3s ease-out;
}

/* Badge pulse animation for new notifications */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.notification-badge-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Notification entrance animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notification-item.new {
  animation: fadeInUp 0.3s ease-out;
}

/* Dismiss button hover effect */
.notification-dismiss {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.notification-dismiss:hover {
  opacity: 1;
}

/* ============================================================================
   NOTIFICATION DRAWER STYLES (Header Drawer)
   ============================================================================ */

/* Scrollable content - only apply when drawer is open */
#notifications_drawer.open {
  max-height: calc(100vh - 40px);
}

/* Ensure the scrollable area within the drawer has proper height */
#notifications_drawer.open .kt-scrollable-y-auto,
#notifications_drawer.open [data-kt-scrollable="true"] {
  max-height: calc(100vh - 280px); /* Account for header, tabs, footer */
  overflow-y: auto;
}

/* Warning notification items in the drawer */
.warning-notification-item {
  transition: background-color 0.15s ease;
}

.warning-notification-item:last-child {
  border-bottom: none;
}

/* Ensure proper text truncation */
.warning-notification-item .line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Notification count badge on header button */
.notification-count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  background-color: #ef4444;
  border-radius: 9999px;
  box-shadow: 0 0 0 2px var(--kt-background, #ffffff);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Dark mode adjustments for warning notifications */
.dark .warning-notification-item.bg-red-50,
html.dark .warning-notification-item.bg-red-50 {
  background-color: rgba(239, 68, 68, 0.1);
}

.dark .warning-notification-item.bg-amber-50,
html.dark .warning-notification-item.bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.1);
}

/* Warnings section header */
.warnings-list {
  border-top: 1px solid var(--kt-border-color, #e5e7eb);
}