/* ============================================================================
 * COMPONENT · tc-toast
 * ----------------------------------------------------------------------------
 * Transient Notifications. Loest .gm-toast und die showToast()-Bridge-
 * Implementations ab.
 *
 * Single JS-API in js/tc-ui.js:  TC.Toast.show(message, { variant, duration })
 *
 * Joy-of-Use:
 *   - Slide-In + Fade-Out Animation
 *   - Hover-Pause (Timer pausiert wenn Maus drueber)
 *   - Auto-Dismiss (3s default, 5s fuer danger)
 *   - Position: bottom-center auf Mobile, bottom-right auf Desktop
 *
 * Version: 1.0 (29. Mai 2026, Phase 2 Tranche 2)
 * ============================================================================ */


/* ============================================================================
 * CONTAINER — wird von TC.Toast einmalig erstellt
 * ============================================================================ */
.tc-toast-container {
  position: fixed;
  bottom: var(--tc-space-4);
  right: var(--tc-space-4);
  z-index: var(--tc-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2);
  pointer-events: none;
  max-width: 400px;
}


/* ============================================================================
 * BASE — Toast-Item
 * ============================================================================ */
.tc-toast {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: var(--tc-space-3) var(--tc-space-4);
  background: var(--tc-bg-surface-2);
  border: 1px solid var(--tc-deco-ornament-border);
  border-radius: var(--tc-radius-md);
  box-shadow: var(--tc-shadow-lg);
  color: var(--tc-text-default);
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-medium);
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition: transform var(--tc-motion-bounce),
              opacity 200ms var(--tc-ease-default);
}

.tc-toast.is-visible {
  transform: translateX(0);
  opacity: 1;
}

.tc-toast.is-leaving {
  transform: translateX(120%);
  opacity: 0;
  transition: transform 250ms var(--tc-ease-in),
              opacity 150ms var(--tc-ease-in);
}

.tc-toast__icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  line-height: 1;
}

.tc-toast__message {
  flex: 1;
  min-width: 0;
}

.tc-toast__close {
  background: none;
  border: none;
  color: var(--tc-text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 var(--tc-space-1);
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--tc-motion-fast);
}
.tc-toast__close:hover {
  color: var(--tc-text-strong);
}


/* ============================================================================
 * VARIANTS — semantische Status-Farben
 * ============================================================================ */
.tc-toast--success {
  background: var(--tc-success-bg);
  border-color: var(--tc-success-border);
  color: var(--tc-success);
}
.tc-toast--success .tc-toast__icon { color: var(--tc-success); }

.tc-toast--warning {
  background: var(--tc-warning-bg);
  border-color: var(--tc-warning-border);
  color: var(--tc-warning);
}
.tc-toast--warning .tc-toast__icon { color: var(--tc-warning); }

.tc-toast--danger {
  background: var(--tc-danger-bg);
  border-color: var(--tc-danger-border);
  color: var(--tc-danger);
}
.tc-toast--danger .tc-toast__icon { color: var(--tc-danger); }

.tc-toast--info {
  background: var(--tc-info-bg);
  border-color: var(--tc-info-border);
  color: var(--tc-info);
}
.tc-toast--info .tc-toast__icon { color: var(--tc-info); }


/* ============================================================================
 * RESPONSIVE — bottom-center auf Mobile
 * ============================================================================ */
@media (max-width: 600px) {
  .tc-toast-container {
    left: var(--tc-space-3);
    right: var(--tc-space-3);
    bottom: var(--tc-space-3);
    max-width: none;
  }
  .tc-toast {
    transform: translateY(120%);
  }
  .tc-toast.is-visible {
    transform: translateY(0);
  }
  .tc-toast.is-leaving {
    transform: translateY(120%);
  }
}


/* ============================================================================
 * REDUCED-MOTION
 * ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .tc-toast {
    transform: none;
    transition: opacity 100ms ease;
  }
  .tc-toast.is-leaving {
    transform: none;
  }
}