/* ==========================================
 * 🍞 TOAST NOTIFICATION SYSTEM - REFACTORED
 * ==========================================
 * Uses design tokens from design-tokens.css
 * Consistent theming across light and dark modes
 */

.app-toast-container {
  position: fixed;
  top: 80px;
  right: var(--spacing-lg);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  pointer-events: none;
}

/* ==========================================
 * 📜 TOAST HISTORY PANEL
 * ==========================================*/

.toast-history-toggle {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: calc(var(--z-toast) - 10);
  background: var(--text-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-pill);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.toast-history-toggle:hover {
  background: var(--text-secondary);
  transform: scale(1.05);
  box-shadow: var(--shadow-xl);
}

.toast-history-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-circle);
  background: var(--color-danger);
  color: var(--text-inverse);
  font-size: var(--font-size-xxs);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-xs);
  font-weight: var(--font-weight-bold);
}

.toast-history-panel {
  position: fixed;
  bottom: 84px;
  right: var(--spacing-lg);
  width: 360px;
  max-height: 420px;
  background: var(--surface-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-primary);
  z-index: calc(var(--z-toast) - 20);
  display: none;
  overflow: hidden;
}

.toast-history-panel.open {
  display: flex;
  flex-direction: column;
}

.toast-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-md);
  border-bottom: 1px solid var(--border-primary);
  background: var(--surface-secondary);
}

.toast-history-title {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

.toast-history-actions {
  display: flex;
  gap: var(--spacing-xs);
}

.toast-history-list {
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md)
    var(--spacing-md);
  overflow-y: auto;
}

.toast-history-item {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
  background: var(--surface-tertiary);
  transition: background var(--transition-fast);
}

.toast-history-item:hover {
  background: var(--surface-hover);
}

.toast-history-item:last-child {
  margin-bottom: 0;
}

.toast-history-item .toast-history-icon {
  font-size: var(--font-size-base);
  margin-top: var(--spacing-xs);
}

.toast-history-item .toast-history-message {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.toast-history-item .toast-history-time {
  font-size: var(--font-size-xxs);
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
}

.toast-history-item.success .toast-history-icon {
  color: var(--color-success);
}

.toast-history-item.error .toast-history-icon {
  color: var(--color-danger);
}

.toast-history-item.warning .toast-history-icon {
  color: var(--color-warning);
}

.toast-history-item.info .toast-history-icon {
  color: var(--color-info);
}

/* ==========================================
 * 🌙 DARK MODE OVERRIDES
 * ==========================================*/

body.dark-mode .toast-history-toggle {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
  box-shadow: var(--dark-shadow-lg);
}

body.dark-mode .toast-history-toggle:hover {
  background: var(--dark-bg-quaternary);
  box-shadow: var(--dark-shadow-xl);
}

body.dark-mode .toast-history-panel {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-xl);
}

body.dark-mode .toast-history-header {
  background: var(--dark-bg-primary);
  border-color: var(--dark-border);
}

body.dark-mode .toast-history-title {
  color: var(--dark-text-primary);
}

body.dark-mode .toast-history-item {
  background: var(--dark-bg-tertiary);
}

body.dark-mode .toast-history-item:hover {
  background: var(--dark-bg-quaternary);
}

body.dark-mode .toast-history-item .toast-history-message {
  color: var(--dark-text-primary);
}

body.dark-mode .toast-history-item .toast-history-time {
  color: var(--dark-text-muted);
}

/* ==========================================
 * 🍞 TOAST COMPONENT
 * ==========================================*/

.app-toast {
  min-width: 300px;
  max-width: 500px;
  background: var(--surface-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateX(400px);
  transition: all 0.4s var(--easing-ease-out);
  pointer-events: all;
  overflow: hidden;
  border-left: 4px solid;
  font-family: var(--font-family-base);
}

.app-toast.show {
  opacity: 1;
  transform: translateX(0);
}

.app-toast.hiding {
  opacity: 0;
  transform: translateX(400px);
}

.app-toast-content {
  display: flex;
  align-items: center;
  padding: var(--spacing-md);
  gap: var(--spacing-md);
}

.app-toast-icon {
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.app-toast-message {
  flex: 1;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

.app-toast-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-lg);
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.app-toast-close:hover {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}

/* ==========================================
 * 🎨 TOAST TYPE VARIANTS
 * ==========================================*/

.app-toast-success {
  border-left-color: var(--color-success);
}

.app-toast-success .app-toast-icon {
  color: var(--color-success);
}

.app-toast-error {
  border-left-color: var(--color-danger);
}

.app-toast-error .app-toast-icon {
  color: var(--color-danger);
}

.app-toast-warning {
  border-left-color: var(--color-warning);
}

.app-toast-warning .app-toast-icon {
  color: var(--color-warning);
}

.app-toast-info {
  border-left-color: var(--color-info);
}

.app-toast-info .app-toast-icon {
  color: var(--color-info);
}

/* ==========================================
 * 🌙 DARK MODE TOAST OVERRIDES
 * ==========================================*/

body.dark-mode .app-toast {
  background: var(--dark-bg-secondary);
  box-shadow: var(--dark-shadow-md);
}

body.dark-mode .app-toast-message {
  color: var(--dark-text-primary);
}

body.dark-mode .app-toast-close {
  color: var(--dark-text-secondary);
}

body.dark-mode .app-toast-close:hover {
  background-color: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
}

body.dark-mode .app-toast-success .app-toast-icon {
  color: var(--dark-success);
}

body.dark-mode .app-toast-error .app-toast-icon {
  color: var(--dark-danger);
}

body.dark-mode .app-toast-warning .app-toast-icon {
  color: var(--dark-warning);
}

body.dark-mode .app-toast-info .app-toast-icon {
  color: var(--dark-info);
}

/* ==========================================
 * 📱 RESPONSIVE DESIGN
 * ==========================================*/

@media (max-width: 768px) {
  .app-toast-container {
    top: 60px;
    right: var(--spacing-sm);
    left: var(--spacing-sm);
  }

  .app-toast {
    min-width: auto;
    max-width: 100%;
  }

  .toast-history-panel {
    right: var(--spacing-sm);
    left: var(--spacing-sm);
    width: auto;
  }

  .toast-history-toggle {
    right: var(--spacing-md);
    bottom: var(--spacing-md);
  }
}