/* ============================================================
   CCW Portal — Toasts / Notifications
   ============================================================ */

/* ── Container ────────────────────────────────────────────── */
.ccw-toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: 380px;
  width: calc(100% - var(--space-8));
}

/* ── Toast ────────────────────────────────────────────────── */
.ccw-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toastSlideIn 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.ccw-toast.removing {
  animation: toastSlideOut 250ms ease forwards;
}

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

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
    max-height: 120px;
    margin-bottom: 0;
  }
  to {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
    max-height: 0;
    margin-bottom: calc(-1 * var(--space-2));
  }
}

/* ── Toast Icon ───────────────────────────────────────────── */
.ccw-toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.ccw-toast--success .ccw-toast__icon { color: var(--color-success); }
.ccw-toast--error .ccw-toast__icon { color: var(--color-error); }
.ccw-toast--warning .ccw-toast__icon { color: var(--color-warning); }
.ccw-toast--info .ccw-toast__icon { color: var(--color-info); }

/* ── Toast Content ────────────────────────────────────────── */
.ccw-toast__content {
  flex: 1;
  min-width: 0;
}

.ccw-toast__title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
}

.ccw-toast__message {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: 2px;
  line-height: var(--line-height-snug);
}

/* ── Close button ─────────────────────────────────────────── */
.ccw-toast__close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  margin-top: 1px;
}

.ccw-toast__close:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-tertiary);
}

/* ── Progress bar ─────────────────────────────────────────── */
.ccw-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  animation: toastProgress linear forwards;
  transform-origin: left;
}

@keyframes toastProgress {
  from { width: 100%; }
  to { width: 0%; }
}

.ccw-toast--success .ccw-toast__progress { background-color: var(--color-success); }
.ccw-toast--error .ccw-toast__progress { background-color: var(--color-error); }
.ccw-toast--warning .ccw-toast__progress { background-color: var(--color-warning); }
.ccw-toast--info .ccw-toast__progress { background-color: var(--color-info); }

/* ── Accent border ────────────────────────────────────────── */
.ccw-toast--success { border-left: 3px solid var(--color-success); }
.ccw-toast--error { border-left: 3px solid var(--color-error); }
.ccw-toast--warning { border-left: 3px solid var(--color-warning); }
.ccw-toast--info { border-left: 3px solid var(--color-info); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .ccw-toast-container {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
    max-width: none;
    width: auto;
  }

  @keyframes toastSlideIn {
    from {
      opacity: 0;
      transform: translateY(100%) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes toastSlideOut {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
      max-height: 120px;
    }
    to {
      opacity: 0;
      transform: translateY(30px) scale(0.95);
      max-height: 0;
    }
  }
}