/* ==========================================================================
   SystemToast — Tickchak Design System
   הודעה קופצת: הצלחה · שגיאה · אזהרה.
   מקור-אמת: Design-System-Tickchak 1426:6135 (SystemToast) · APP-108
   Required: tokens.css
   Usage:
     <div class="toast-layer" id="toasts"></div>
     + general/system-toast.js  →  Toast.show({status:'success', title:'…', text:'…'})

   כל ערך כאן נמשך מהקומפוננט בפיגמה — לא נמדד בעין.
   ========================================================================== */

/* שכבת-ההודעות — יושבת מעל הכול, ואינה חוסמת לחיצות מתחתיה */
.toast-layer{
  position:fixed; z-index:800;
  top:var(--space-xl); inset-inline-start:var(--space-xl);   /* RTL: start = ימין */
  display:flex; flex-direction:column; gap:var(--space-md);
  align-items:flex-start;
  pointer-events:none;
}
@media (max-width:480px){
  .toast-layer{ inset-inline:var(--space-md); top:var(--space-md); }
}

/* ── ההודעה עצמה ──
   Figma: רוחב 384 · radius 12 (border-radius/border-radius-lg) · overflow clip */
.system-toast{
  width:384px; max-width:100%;
  border-radius:var(--border-radius-lg);
  overflow:hidden;
  display:flex; align-items:stretch;
  direction:rtl;
  pointer-events:auto;
  box-shadow:0 10px 32px rgba(0,0,0,.28);
  /* נכנסת מהפינה הימנית-עליונה, עם קפיצה קלה בסוף (אסף, 02/08: «קצת דרמטי»).
     ה-overshoot ב-cubic-bezier הוא מה שנותן את התחושה — לא משך ארוך יותר. */
  animation:toastIn .42s cubic-bezier(.16,1.25,.4,1);
  transform-origin:top right;
}
.system-toast.is-out{ animation:toastOut .24s cubic-bezier(.4,0,.85,.3) forwards; }
@keyframes toastIn{
  0%   { opacity:0; transform:translate(120%,-28px) scale(.9) rotate(2deg); }
  60%  { opacity:1; }
  100% { opacity:1; transform:translate(0,0) scale(1) rotate(0); }
}
@keyframes toastOut{
  to { opacity:0; transform:translate(110%,-14px) scale(.94); }
}
/* מי שביקש פחות תנועה — מקבל הופעה פשוטה */
@media (prefers-reduced-motion:reduce){
  .system-toast{ animation:toastFade .18s ease-out; }
  .system-toast.is-out{ animation:toastOutFade .16s ease-in forwards; }
  @keyframes toastFade{ from{opacity:0;} to{opacity:1;} }
  @keyframes toastOutFade{ to{opacity:0;} }
}

/* גוף — grays/700, טקסט לבן, ריפוד 8, רווח 4 */
.system-toast__body{
  flex:1 1 0; min-width:0;
  background:var(--color-grays-700);
  color:var(--color-solids-white);   /* Figma: color/text/primary → white */
  padding:var(--space-sm);
  display:flex; flex-direction:column; gap:var(--space-xs);
  text-align:right;
  word-break:break-word;
}
.system-toast__title{
  margin:0;
  font-size:var(--font-size-body); font-weight:var(--font-weight-bold);
  line-height:var(--dim-5,20px);
}
.system-toast__text{
  margin:0;
  font-size:var(--font-size-caption); font-weight:var(--font-weight-regular);
  line-height:var(--dim-4,16px);
}

/* פס-המצב — הצבע הוא מה שמבדיל בין השלושה. ריפוד 10/8, אייקון 20 */
.system-toast__strip{
  flex:none;
  padding:var(--space-sm) 10px;
  display:flex; align-items:flex-start; justify-content:center;
}
.system-toast__ic{
  width:20px; height:20px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.system-toast__ic svg{ width:10px; height:10px; display:block; }

/* שלושת המצבים */
.system-toast.success .system-toast__strip{ background:var(--tl-color-state-success-border); }
/* 🔴 הווי הוא **בצבע הפס הכהה**, לא לבן — כך זה בקומפוננט (1426:6047).
   עיגול success/bg בהיר, והסימן בתוכו success/border. (אסף תפס, 02/08.) */
.system-toast.success .system-toast__ic{ background:var(--tl-color-state-success-bg); color:var(--tl-color-state-success-border); }
.system-toast.success .system-toast__ic svg{ width:11px; height:11px; }

.system-toast.error .system-toast__strip{ background:var(--color-reds-50); }
.system-toast.error .system-toast__ic{ background:var(--color-reds-400); color:var(--color-solids-white); }

.system-toast.warning .system-toast__strip{ background:var(--color-oranges-100); }
/* האזהרה היא צורה מלאה (עיגול+קריאה באותו path) ולא סימן בתוך עיגול —
   ולכן אין לה רקע. הצבע: state/warning/main = oranges/400 (#f28c00). */
.system-toast.warning .system-toast__ic{ background:transparent; color:var(--ta-color-state-warning-main); }
.system-toast.warning .system-toast__ic svg{ width:20px; height:20px; }

/* הודעה בלי שורת-הסבר — הכותרת לבדה, בלי רווח מיותר */
.system-toast__text:empty{ display:none; }