/* public/assets/test/css/partials/fm-toast.css */
/* FK01 Global Notify (Top-right) — subtle, compact, non-intrusive
   - Works for: #fm_notify_root / #fm_toast_root / .fm-toast-root
   - Toast node: .fm-toast
   - Message: .fm-toast__msg / .fm-toast__text
   - Icon: .fm-toast__icon
   - No close button (hidden)
*/

/* =========================
   0) Root container
   ========================= */
#fm_notify_root,
#fm_toast_root,
.fm-toast-root{
  position: fixed !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 1000002 !important; /* > login modal overlay */
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: auto !important;
  max-width: min(92vw, 360px) !important;
  pointer-events: none !important; /* container 不挡点击 */
}

/* =========================
   1) Toast card
   ========================= */
.fm-toast{
  pointer-events: auto !important; /* card 本体可 hover */
  position: relative !important;

  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;

  padding: 10px 12px !important;
  border-radius: 12px !important;

  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow:
    0 10px 26px rgba(15,23,42,.10),
    0 1px 0 rgba(255,255,255,.50) inset !important;
  backdrop-filter: blur(10px) !important;

  color: #0f172a !important;
  font-size: 13px !important;
  line-height: 1.38 !important;

  opacity: 0 !important;
  transform: translateY(-6px) !important;
  transition: opacity .16s ease, transform .16s ease !important;

  /* 左侧细色条（克制，不突兀） */
  border-left: 3px solid var(--fm-toast-tint, #2563eb) !important;
}

/* 入场/退场（兼容你现有 enter-active/leave-active） */
.fm-toast.is-in,
.fm-toast-enter-active{
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.fm-toast-leave-active{
  opacity: 0 !important;
  transform: translateY(-6px) !important;
}

/* hover：稍微更实一点，不要发光 */
.fm-toast:hover{
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(15,23,42,.14) !important;
}

/* =========================
   2) Icon (small, tasteful)
   ========================= */
.fm-toast__icon{
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  flex: 0 0 22px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin-top: 1px !important;

  /* 默认：info */
  background: rgba(37,99,235,.10) !important;
  color: #2563eb !important;
}

/* 如果你 icon 是 <span class="material-icons">... */
.fm-toast__icon .material-icons{
  font-size: 16px !important;
  line-height: 1 !important;
}

/* 如果你 icon 是 svg */
.fm-toast__icon svg{
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* =========================
   3) Text layout
   ========================= */
.fm-toast__body,
.fm-toast__content{
  flex: 1 !important;
  min-width: 0 !important;
  display: block !important;
}

/* 只保留一块文本，两行截断 */
.fm-toast__msg,
.fm-toast__text{
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  word-break: break-word !important;
}

/* meta 如果存在：更小更淡 */
.fm-toast__meta{
  margin-top: 2px !important;
  font-size: 12px !important;
  color: rgba(15,23,42,.60) !important;
}

/* =========================
   4) Disable bar/close (you said no close button)
   ========================= */
.fm-toast__bar{ display:none !important; }
.fm-toast__close{ display:none !important; }

/* =========================
   5) Type tints (FK01 subdued)
   Supports: .fm-toast.is-xxx  and .fm-toast--xxx
   ========================= */

/* INFO */
.fm-toast.is-info,
.fm-toast--info{
  --fm-toast-tint: #2563eb;
  border-color: rgba(37,99,235,.14) !important;
}
.fm-toast.is-info .fm-toast__icon,
.fm-toast--info .fm-toast__icon{
  background: rgba(37,99,235,.10) !important;
  color: #2563eb !important;
}

/* SUCCESS */
.fm-toast.is-success,
.fm-toast--success{
  --fm-toast-tint: #10b981;
  border-color: rgba(16,185,129,.14) !important;
}
.fm-toast.is-success .fm-toast__icon,
.fm-toast--success .fm-toast__icon{
  background: rgba(16,185,129,.10) !important;
  color: #10b981 !important;
}

/* WARN / WARNING */
.fm-toast.is-warn,
.fm-toast.is-warning,
.fm-toast--warn{
  --fm-toast-tint: #f59e0b;
  border-color: rgba(245,158,11,.16) !important;
}
.fm-toast.is-warn .fm-toast__icon,
.fm-toast.is-warning .fm-toast__icon,
.fm-toast--warn .fm-toast__icon{
  background: rgba(245,158,11,.12) !important;
  color: #f59e0b !important;
}

/* ERROR */
.fm-toast.is-error,
.fm-toast--error{
  --fm-toast-tint: #ef4444;
  border-color: rgba(239,68,68,.16) !important;
}
.fm-toast.is-error .fm-toast__icon,
.fm-toast--error .fm-toast__icon{
  background: rgba(239,68,68,.10) !important;
  color: #ef4444 !important;
}

/* =========================
   6) Mobile
   ========================= */
@media (max-width: 480px){
  #fm_notify_root,
  #fm_toast_root,
  .fm-toast-root{
    top: 10px !important;
    right: 10px !important;
    max-width: calc(100vw - 20px) !important;
  }
  .fm-toast{
    border-radius: 12px !important;
    padding: 10px 11px !important;
  }
}

/* =========================
   7) Hard override for the “giant pill center” bug
   If some old CSS makes toast full-width/centered, this forces it back.
   ========================= */
.fm-toast{
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* =========================
   8) Optional: hide auth-inline toast (if your modal has its own)
   (If you still want it, delete this block)
   ========================= */
#login_modal .auth-toast,
#login_modal [data-auth-toast]{
  display: none !important;
}