/* Toast — mirrored 1:1 from SUARA-Web Toast.jsx + ToastContext + fade-in */

:root,
html[data-theme="light"] {
  --toast-info: oklch(71% 0.143 215.221);
  --toast-bg: var(--color-base-100, oklch(98% 0.003 247.858));
  --toast-content: var(--color-base-content, oklch(20% 0.042 265.755));
  --toast-success: var(--color-success, oklch(72% 0.219 149.579));
  --toast-error: var(--color-error, oklch(64% 0.246 16.439));
  --toast-warning: var(--color-warning, oklch(70% 0.213 47.604));
  --toast-shadow-2xl: var(--shadow-2xl, 0 25px 50px -12px rgb(0 0 0 / 0.25));
}

html.dark,
html[data-theme="dark"] {
  --toast-bg: #0f172a; /* slate-900 — matches dark:bg-slate-900 */
  --toast-content: var(--color-base-content, oklch(98% 0.003 247.858));
}

@keyframes suara-toast-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* DaisyUI: toast toast-top toast-end z-[9999] p-4 animate-fade-in pointer-events-none */
.suara-toast-host {
  position: fixed;
  inset-inline-end: 0;
  top: 0;
  /* Must sit above .ep-modal (z-index: 10000) so success/error toasts
     are visible while a modal (e.g. change-password) stays open. */
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 1rem;
  pointer-events: none;
  max-width: 100%;
}

.suara-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  max-width: 24rem; /* max-w-sm */
  padding: 0.75rem 1rem; /* py-3 px-4 */
  border-radius: 0.75rem; /* rounded-xl */
  border: 1px solid;
  background: var(--toast-bg);
  box-shadow: var(--toast-shadow-2xl);
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  pointer-events: auto;
  animation: suara-toast-fade-in 0.5s ease-out both;
}

.suara-toast--success {
  border-color: color-mix(in oklab, var(--toast-success) 30%, transparent);
  color: var(--toast-success);
}

.suara-toast--error {
  border-color: color-mix(in oklab, var(--toast-error) 30%, transparent);
  color: var(--toast-error);
}

.suara-toast--warning {
  border-color: color-mix(in oklab, var(--toast-warning) 30%, transparent);
  color: var(--toast-warning);
}

.suara-toast--info {
  border-color: color-mix(in oklab, var(--toast-info) 30%, transparent);
  color: var(--toast-info);
}

.suara-toast__icon {
  width: 1.25rem; /* w-5 */
  height: 1.25rem; /* h-5 */
  flex-shrink: 0;
  margin-top: 0.125rem; /* mt-0.5 */
}

.suara-toast__body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem; /* gap-0.5 */
  min-width: 0;
  flex: 1;
}

.suara-toast__message {
  font-weight: 600; /* font-semibold */
  color: var(--toast-content); /* text-base-content */
  line-height: 1.25; /* leading-tight */
  word-break: break-word;
}

.suara-toast__close {
  margin-inline-start: auto;
  padding: 0.125rem; /* p-0.5 */
  border: 0;
  border-radius: 0.5rem; /* rounded-lg */
  background: transparent;
  color: color-mix(in oklab, var(--toast-content) 40%, transparent); /* text-base-content/40 */
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease;
}

.suara-toast__close:hover {
  color: var(--toast-content);
}