/* =============================================================================
   GSMOne Toast — Official notification component styles
   Pairs with /js/gsmone-toast.js. Built on Design System tokens (with safe
   fallbacks so it works even if gsmone-design-system.css isn't loaded).

   WCAG AA: each toast uses a tinted surface + dark same-hue text + a colored
   left accent. Text/background pairs verified ≥ 4.5:1 (normal text).
   ============================================================================= */

.gs-toast-region {
  position: fixed;
  bottom: var(--ds-space-6, 24px);
  right: var(--ds-space-6, 24px);
  z-index: var(--ds-z-toast, 1400);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3, 12px);
  width: 380px;
  max-width: calc(100vw - 32px);
  pointer-events: none;            /* region transparent; toasts re-enable */
}

.gs-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  border-radius: var(--ds-radius-lg, 10px);
  border: 1px solid transparent;
  border-left-width: 4px;
  background: #fff;
  box-shadow: var(--ds-shadow-lg, 0 12px 24px rgba(17,24,39,.10), 0 4px 8px rgba(17,24,39,.05));
  font-family: var(--ds-font-sans, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  /* enter/exit animation */
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .22s cubic-bezier(.3,0,0,1), transform .22s cubic-bezier(.3,0,0,1);
}
.gs-toast.is-in  { opacity: 1; transform: none; }
.gs-toast.is-out { opacity: 0; transform: translateY(8px) scale(.98); }

.gs-toast__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.gs-toast__icon svg { width: 100%; height: 100%; display: block; }

.gs-toast__content { flex: 1; min-width: 0; }
.gs-toast__title {
  font-size: var(--ds-text-sm, .875rem); font-weight: 600;
  line-height: 1.35; color: #111827; margin-bottom: 2px;
}
.gs-toast__msg {
  font-size: var(--ds-text-sm, .875rem); line-height: 1.45;
  color: #374151; word-wrap: break-word;
}

.gs-toast__close {
  flex-shrink: 0; width: 24px; height: 24px; margin: -2px -2px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 6px;
  color: #9ca3af; cursor: pointer; transition: background .15s, color .15s;
}
.gs-toast__close svg { width: 16px; height: 16px; }
.gs-toast__close:hover { background: rgba(0,0,0,.06); color: #374151; }
.gs-toast__close:focus-visible { outline: none; box-shadow: 0 0 0 2px #006994; color: #374151; }

/* ── Type variants (AA contrast: dark text on light tint) ── */
.gs-toast--success { border-color: #a7f3d0; border-left-color: #059669; background: #ecfdf5; }
.gs-toast--success .gs-toast__icon  { color: #059669; }
.gs-toast--success .gs-toast__title { color: #064e3b; }
.gs-toast--success .gs-toast__msg   { color: #065f46; }   /* #065f46 on #ecfdf5 ≈ 7.4:1 */

.gs-toast--error   { border-color: #fecaca; border-left-color: #dc2626; background: #fef2f2; }
.gs-toast--error .gs-toast__icon  { color: #dc2626; }
.gs-toast--error .gs-toast__title { color: #7f1d1d; }
.gs-toast--error .gs-toast__msg   { color: #991b1b; }     /* #991b1b on #fef2f2 ≈ 7.0:1 */

.gs-toast--warning { border-color: #fde68a; border-left-color: #d97706; background: #fffbeb; }
.gs-toast--warning .gs-toast__icon  { color: #b45309; }
.gs-toast--warning .gs-toast__title { color: #78350f; }
.gs-toast--warning .gs-toast__msg   { color: #92400e; }   /* #92400e on #fffbeb ≈ 6.8:1 */

.gs-toast--info    { border-color: #bfdbfe; border-left-color: #2563eb; background: #eff6ff; }
.gs-toast--info .gs-toast__icon  { color: #2563eb; }
.gs-toast--info .gs-toast__title { color: #1e3a8a; }
.gs-toast--info .gs-toast__msg   { color: #1e40af; }      /* #1e40af on #eff6ff ≈ 7.1:1 */

/* ── Dark mode (matches the app's .dark-mode convention + prefers-color-scheme) ── */
.dark-mode .gs-toast,
.dark-mode.gs-toast { background: #1e293b; box-shadow: 0 12px 28px rgba(0,0,0,.45); }
.dark-mode .gs-toast__title { color: #f1f5f9; }
.dark-mode .gs-toast__msg   { color: #cbd5e1; }
.dark-mode .gs-toast__close { color: #94a3b8; }
.dark-mode .gs-toast__close:hover { background: rgba(255,255,255,.08); color: #f1f5f9; }
.dark-mode .gs-toast--success { background: #052e23; border-color: #065f46; }
.dark-mode .gs-toast--success .gs-toast__msg { color: #6ee7b7; }
.dark-mode .gs-toast--error   { background: #3b1212; border-color: #7f1d1d; }
.dark-mode .gs-toast--error .gs-toast__msg   { color: #fca5a5; }
.dark-mode .gs-toast--warning { background: #3a2a08; border-color: #78350f; }
.dark-mode .gs-toast--warning .gs-toast__msg { color: #fcd34d; }
.dark-mode .gs-toast--info    { background: #102a4c; border-color: #1e3a8a; }
.dark-mode .gs-toast--info .gs-toast__msg    { color: #93c5fd; }

@media (prefers-color-scheme: dark) {
  body:not(.light-mode) .gs-toast { background: #1e293b; box-shadow: 0 12px 28px rgba(0,0,0,.45); }
  body:not(.light-mode) .gs-toast__title { color: #f1f5f9; }
  body:not(.light-mode) .gs-toast__msg   { color: #cbd5e1; }
}

/* ── Mobile: full-width bottom, newest above the home indicator ── */
@media (max-width: 767px) {
  .gs-toast-region {
    left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none;
  }
  .gs-toast { padding: 14px; }
}

/* ── Reduced motion: no slide/scale, instant show/hide ── */
@media (prefers-reduced-motion: reduce) {
  .gs-toast { transition: opacity .01ms; transform: none; }
  .gs-toast.is-in { transform: none; }
  .gs-toast.is-out { transform: none; }
}