/* ============================================================
   الإشعارات (Toaster) + حالات التحقق من الفورمز
   ============================================================ */
.toast-container{
  position:fixed; top:18px; inset-inline-end:18px; z-index:9999;
  display:flex; flex-direction:column; gap:10px;
  max-width:min(92vw, 380px); pointer-events:none;
}
html[dir="ltr"] .toast-container{ inset-inline-end:18px; }

.toast{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:11px;
  background:#fff; color:#1f2430;
  border:1px solid rgba(0,0,0,.06);
  border-inline-start:4px solid #8b8f9a;
  border-radius:14px; padding:13px 15px;
  box-shadow:0 12px 32px rgba(20,20,40,.16);
  font-family:inherit; font-size:14.5px; line-height:1.5;
  transform:translateY(-12px); opacity:0;
  transition:transform .26s cubic-bezier(.2,.8,.2,1), opacity .26s ease;
}
.toast.show{ transform:translateY(0); opacity:1; }
.toast-ic{ flex-shrink:0; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; color:#fff; margin-top:1px; }
.toast-ic svg{ width:15px; height:15px; }
.toast-msg{ flex:1; }
.toast-x{ flex-shrink:0; background:none; border:0; cursor:pointer; font-size:20px; line-height:1; color:#9aa0ac; padding:0 2px; }
.toast-x:hover{ color:#444; }

.toast-success{ border-inline-start-color:#10b981; }
.toast-success .toast-ic{ background:#10b981; }
.toast-error{ border-inline-start-color:#ef4444; }
.toast-error .toast-ic{ background:#ef4444; }
.toast-info{ border-inline-start-color:#6366f1; }
.toast-info .toast-ic{ background:#6366f1; }

/* حالات التحقق على الحقول */
.is-invalid{ border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.12) !important; }
.field-error{ display:block; color:#dc2626; font-size:12.5px; margin-top:5px; }

/* حقل كلمة المرور مع زر إظهار/إخفاء (عين) */
.pw-field{ position:relative; }
.pw-field > input{ padding-inline-end:46px; }
.pw-toggle{ position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%); width:34px; height:34px; display:grid; place-items:center; padding:0; color:#94a3b8; background:none; border:none; border-radius:8px; cursor:pointer; transition:color .15s ease, background .15s ease; }
.pw-toggle:hover{ color:var(--v-700, #4f46e5); background:var(--v-50, #f1f5f9); }
.pw-toggle svg{ width:19px; height:19px; display:block; }
.pw-toggle .ic-off{ display:none; }
.pw-field.pw-visible .pw-toggle .ic-on{ display:none; }
.pw-field.pw-visible .pw-toggle .ic-off{ display:block; }
