/**
 * ================================================================
 * ميثاق النوافذ والاستوديوهات الموحد - أكاديمية جدير
 * Unified Window Protocol & Modal Sizing Standard
 * ================================================================
 */

/* 1. Backdrop Overlay (Primary Windows & Studios) */
.modal-overlay,
.jadeer-modal-overlay,
.custom-modal-backdrop,
.custom-modal,
.drawer-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  background: var(--modal-backdrop-bg, rgba(6, 10, 18, 0.75));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center !important;
  justify-content: center !important;
  z-index: 200000 !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important; /* Zero spillover outside browser */
  opacity: 0;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active,
.jadeer-modal-overlay.active,
.custom-modal-backdrop.active,
.custom-modal.active,
.drawer-overlay.active {
  display: flex !important;
  opacity: 1;
}

/* Child & Secondary Modals (Overlays opened from or over Studios, Cockpits & Parent Modals) */
#studentExamPaperModal,
#studentGradeEditModal,
#profileQuickGradeModal,
#profileEditStudentModal,
#studentAttEditModal,
#profileTransferDocModal,
#profileAddSubModal,
#studentOutreachModal,
#ansStudentPaperModal,
#addLessonModal,
#editLessonPlatformModal,
#addLessonPlatformModal,
#addLessonItemModal,
#editLessonFileModal,
#fileWatchersModal,
#inAppPdfModal,
#lecturePlayerModal,
#enrollStudentModal,
#addStudentModal,
#bulkEnrollModal,
#bulkRemoveModal,
#createGroupModal,
#scheduleLiveSessionModal,
#privateSessionBookingModal,
#moveStudentGroupModal,
#sendNoticeModal,
#sendNoticeToStudentModal,
#editStudentAttendanceModal,
#platformEditAttendanceModal,
#addFaqInlineModal,
#bonusModal,
#editExplanationModal,
#ansEditQuestionModal,
#ansAddQuestionModal,
#supervisoryEvalModal,
#teacherDocPreviewModal,
#teacherPayActionModal,
#editTeacherModalDirect,
#teacherAssignCourseModal,
#subDetailModal,
#editSubscriptionModal,
#addSubscriptionModal,
#requestTransferDocModal,
#hrDynamicModal,
#editStudentEvalModal,
#editStudentModal,
#documentAuditHubModal,
#courseEditModal,
#courseContentStudioModal,
#courseLandingStudioModal,
#courseSettingsStudioModal,
#studentDetailDrawer,
#courseDetailDrawer,
.child-modal-overlay,
.secondary-modal-overlay,
.sub-modal-overlay,
[data-modal-tier="child"] {
  z-index: 250000 !important;
}

/* Tertiary Dialogs, Lightboxes, Alerts & Command Palette */
#jadeerDocLightboxModal,
#commandPaletteModal,
.lightbox-overlay,
.prompt-modal-overlay,
[data-modal-tier="tertiary"] {
  z-index: 300000 !important;
}

/* Universal Toast Notifications Stack — Guaranteed Above All Modals */
#toastContainer,
.toast-box,
.toast-container,
.jadeer-toast-container {
  z-index: 1000000 !important;
}

/* 2. Unified Studio Window (Full Executive Sizing - 100% Identical Across Student & Teacher) */
.jadeer-window-box,
.student-profile-box,
.teacher-profile-box,
.course-console-box,
.track-studio-box,
.console-modal-box,
.modal-box-large,
.profile-hub-dialog {
  position: relative !important;
  width: min(98vw, calc(100vw - 24px)) !important;
  max-width: min(98vw, calc(100vw - 24px)) !important;
  height: min(95vh, 95dvh, calc(100vh - 24px), calc(100dvh - 24px)) !important;
  max-height: min(95vh, 95dvh, calc(100vh - 24px), calc(100dvh - 24px)) !important;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--modal-shadow);
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; /* Locks children from spilling outside */
  box-sizing: border-box !important;
  margin: auto !important; /* Prevents overflow from pushing header/close button off-screen */
  animation: jadeerModalScaleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Medium Dialog Form */
.modal-box,
.modal-card,
.custom-modal-box,
.modal-dialog-large,
.jadeer-modal-medium {
  position: relative;
  width: 92vw;
  max-width: 760px;
  max-height: 86vh;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--modal-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  animation: jadeerModalScaleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Wide & Extra Large Dialog Forms (Tables, Multi-Group Assigners) */
.modal-card-wide,
.modal-card-xl,
.modal-box-wide {
  width: 95vw !important;
  max-width: 1150px !important;
  max-height: 92vh !important;
}

/* Compact Alert / Quick Action Dialog */
.modal-box-compact,
.jadeer-modal-compact {
  position: relative;
  width: 90vw;
  max-width: 480px;
  max-height: 80vh;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--modal-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  animation: jadeerModalScaleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes jadeerModalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Zero-flicker Navigation Standard: No re-animation, scale jump, or opacity dip when switching items in an open window */
.modal-overlay.navigating *,
.modal-overlay.navigating .jadeer-window-box,
.modal-overlay.navigating .student-profile-box,
.modal-overlay.navigating .teacher-profile-box,
.student-profile-box.navigating,
.teacher-profile-box.navigating,
.student-profile-box.no-pop,
.teacher-profile-box.no-pop,
.no-pop {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

/* 3. Universal Modal Header (Pinned Top Bar for Standard Dialogs) */
.jadeer-modal-header,
.modal-header,
.modal-head,
.custom-modal-header {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-medium);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* 3.1 Rich Studio Headers (Student Profile 360°, Teacher Profile 360°, Course Console 360°)
   Never clamped to 48px to prevent overlapping and metadata clipping! */
.course-console-header {
  position: relative !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  padding: 12px 20px !important;
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-card) 100%) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.student-profile-header,
.profile-header-card {
  position: relative !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  padding: 14px 20px !important;
  padding-left: 64px !important; /* Safe reserved space for the pinned top-left close button */
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-card) 100%) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* Pinned Close Button in the top-left corner of the header */
.student-profile-header > .jadeer-win-close,
.student-profile-header .header-close-btn,
.profile-header-card > .jadeer-win-close,
.profile-header-card .header-close-btn {
  position: absolute !important;
  top: 14px !important;
  left: 16px !important;
  z-index: 50 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  border-radius: 8px !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: var(--accent-rose, #ef4444) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  margin: 0 !important;
  padding: 0 !important;
}

.student-profile-header > .jadeer-win-close:hover,
.student-profile-header .header-close-btn:hover,
.profile-header-card > .jadeer-win-close:hover,
.profile-header-card .header-close-btn:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35) !important;
}

.jadeer-modal-header-right,
.modal-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jadeer-modal-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.jadeer-modal-header-left,
.modal-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 4. Windows Standard Close Button (.jadeer-win-close)
   Safe inside header, high contrast, zero viewport spillover */
.jadeer-win-close,
.modal-close,
.modal-close-btn,
.btn-close-modal {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  border-radius: var(--radius-sm, 6px) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.16s ease !important;
  flex-shrink: 0 !important;
}

.jadeer-win-close:hover,
.modal-close:hover,
.modal-close-btn:hover,
.btn-close-modal:hover {
  background: var(--accent-rose, #ef4444) !important;
  color: #ffffff !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  transform: none !important;
}

/* 5. Pinned Sub-Navigation Tab Bar */
.jadeer-modal-nav,
.student-profile-nav-wrap,
.course-console-nav-wrap {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* 6. Independent Scrollable Body */
.jadeer-modal-body,
.student-profile-body,
.course-console-content,
.custom-modal-body,
.modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  box-sizing: border-box;
  background: var(--bg-app);
}

/* 7. Sticky Footer for Actions */
.jadeer-modal-footer,
.modal-footer {
  height: 54px;
  min-height: 54px;
  max-height: 54px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-medium);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.assign-course-item:hover {
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: var(--accent-primary) !important;
}