fix(modal): keep confirm dialog above other modals

ConfirmModal mounts once at the app root, so its Teleport anchor in
<body> is created before page-level modals like TermDetailsModal.
With an identical z-index, later-mounted modals ended up stacking on
top of it, hiding the confirmation prompt (e.g. confirming the new
remove-student-from-term action). Adds a configurable zIndex prop to
BasicModal and gives ConfirmModal a higher value so it always shows
on top regardless of mount order.

src/components/BasicModal.vue

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
     <Transition name="fade-scale" @after-enter="onOpened" @after-leave="onClosed">
-      <div v-if="isOpen" class="basic-modal" @click="onBackdropClick">
+      <div v-if="isOpen" class="basic-modal" :style="{ zIndex }" @click="onBackdropClick">
         <div class="basic-modal__container" :style="containerStyle" @click.stop>
           <div class="basic-modal__card scrollbar-thin">
             <header v-if="hasHeader" class="basic-modal__header">
@@ -43,6 +43,7 @@ const props = defineProps({
   width: { type: String, default: '' },
   maxWidth: { type: String, default: '98%' },
   minWidth: { type: String, default: '85%' },
+  zIndex: { type: [Number, String], default: 50 },
 })
 
 const emit = defineEmits(['open', 'close'])
@@ -101,7 +102,6 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
 .basic-modal {
   position: fixed;
   inset: 0;
-  z-index: 50;
   display: flex;
   align-items: center;
   justify-content: center;

src/components/ConfirmModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <BasicModal min-width="0" max-width="640px" width="95%" :show-close-button="false">
+  <BasicModal min-width="0" max-width="640px" width="95%" :show-close-button="false" :z-index="60">
     <template #default="{ data }">
       <div class="confirm-modal">
         <h3 class="confirm-modal__title">{{ data?.title || 'تأیید حذف' }}</h3>