/**
 * Geese Project Design System — Modals
 * Phase 2b — Confirmation dialogs and short forms
 * Source: C:\Users\Rovick\Downloads\geeseprojdesignsystem (1).html
 * Section: 18 (Modals & offcanvas - extension)
 */

/* Select2 dropdowns (used for the Section field on Add Lesson, and other
   modal forms) ship with a Bootstrap-4-era z-index of 1051. This site's
   real Bootstrap 5 .modal sits at z-index 1055, so the dropdown list was
   opening behind the modal — invisible, looking like a dead click. */
.select2-dropdown {
  z-index: 1075;
}

/* ========== MODAL OVERLAY & BACKDROP ========== */
.gp-ds .modal-backdrop {
  background: rgba(13, 13, 12, 0.5);
}

.gp-ds .modal-backdrop.show {
  opacity: 1;
}

/* ========== MODAL DIALOG ========== */
.gp-ds .modal-dialog {
  max-width: 500px;
  margin: 1.75rem auto;
}

.gp-ds .modal-content {
  background: var(--gp-surface);
  border-radius: 14px;
  box-shadow: var(--gp-shadow-card);
  border: none;
  overflow: hidden;
}

/* ========== MODAL HEADER ========== */
.gp-ds .modal-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--gp-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gp-ds .modal-title {
  font-family: var(--gp-font-head);
  font-weight: 800;
  font-size: 15px;
  color: var(--gp-fg);
  margin: 0;
}

.gp-ds .modal-header .btn-close,
.gp-ds .modal-header .close {
  cursor: pointer;
  color: var(--gp-fg-faint);
  font-size: 18px;
  line-height: 1;
  background: none;
  border: none;
  padding: 0;
  opacity: 1;
  transition: color var(--gp-dur-fast) var(--gp-ease-out);
}

.gp-ds .modal-header .btn-close:hover,
.gp-ds .modal-header .close:hover {
  color: var(--gp-fg);
}

/* ========== MODAL BODY ========== */
.gp-ds .modal-body {
  padding: 20px;
  color: var(--gp-fg-muted);
  font-size: 13.5px;
  line-height: 1.7;
}

.gp-ds .modal-body h4,
.gp-ds .modal-body h5,
.gp-ds .modal-body h6 {
  color: var(--gp-fg);
  margin-top: 0;
}

/* ========== MODAL FOOTER ========== */
.gp-ds .modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--gp-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.gp-ds .modal-footer .btn-primary,
.gp-ds .modal-footer .btn-secondary,
.gp-ds .modal-footer .btn-outline,
.gp-ds .modal-footer .btn-quiet {
  padding: 8px 14px;
  min-height: 38px;
  font-size: 12.5px;
  word-spacing: 0.2em;
  box-shadow: none !important;
}

/* ========== MODAL BODY FORM CONTENT ========== */
/* Shared shell for ~50 AJAX-loaded lesson/question/quiz fragments
   (#large-modal, #scrollable-modal, #right-modal, #ai-modal) — styling
   here covers all of them without editing each individual fragment file. */
.gp-ds .modal-body .form-group > label,
.gp-ds .modal-body label:not(.custom-file-label) {
  font-family: var(--gp-font-head);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gp-fg);
}

.gp-ds .modal-body .form-control,
.gp-ds .modal-body select.form-control,
.gp-ds .modal-body textarea.form-control,
.gp-ds .modal-body .custom-file-input,
.gp-ds .modal-body .custom-file-label {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius);
  color: var(--gp-fg);
  box-shadow: none;
}

.gp-ds .modal-body .form-control:focus,
.gp-ds .modal-body select.form-control:focus,
.gp-ds .modal-body textarea.form-control:focus {
  border-color: var(--gp-border-strong);
  color: var(--gp-fg);
  box-shadow: none;
}

.gp-ds .modal-body .custom-file-label {
  font-size: 13px;
  color: var(--gp-fg-muted);
}

.gp-ds .modal-body p {
  color: var(--gp-fg-muted);
}

.gp-ds .modal-body h5 {
  color: var(--gp-fg);
}

/* Dragula sort screens (sort_lesson.php / sort_section.php, admin + instructor) —
   dragula's own drag/drop JS and .draggable-item ids are untouched. */
.gp-ds .modal-body .card {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: 14px;
  box-shadow: none;
}

.gp-ds .modal-body .bg-dragula {
  background: var(--gp-surface-sunk);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius);
}

.gp-ds .modal-body .draggable-item {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius);
}

.gp-ds .modal-body .draggable-item .card-body {
  padding: 12px 14px;
}

.gp-ds .modal-body .input-group-text {
  background: var(--gp-surface-sunk);
  border: 1px solid var(--gp-border);
  color: var(--gp-fg);
}

/* Custom-control checkbox/radio boxes (checked/focus state already covered
   generically below — this adds the surrounding box look). */
.gp-ds .modal-body .custom-control {
  min-height: 36px;
  padding: 8px 12px 8px 36px;
  margin-bottom: 6px;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius);
  background: var(--gp-surface);
}

.gp-ds .modal-body .custom-control:hover {
  background: var(--gp-surface-sunk);
  border-color: var(--gp-border-strong);
}

.gp-ds .modal-body .custom-control-label {
  font-weight: 600;
  color: var(--gp-fg);
}

.gp-ds .modal-body input[type="radio"]:not(.custom-control-input),
.gp-ds .modal-body input[type="checkbox"]:not(.custom-control-input) {
  accent-color: var(--gp-primary);
}

/* Leftover Hyper confirm (#alert-modal) — DS §18 header/body/footer, no glow pills */
.gp-ds .gp-confirm-modal .modal-body p {
  margin: 0;
}

.gp-ds .gp-confirm-modal .btn::before,
.gp-ds .gp-confirm-modal .btn::after {
  content: none !important;
  display: none !important;
}

/* ========== MODAL SIZES ========== */
.gp-ds .modal-sm {
  max-width: 380px;
}

.gp-ds .modal-lg {
  max-width: 800px;
}

.gp-ds .modal-xl {
  max-width: 1140px;
}

/* ========== MODAL FULLSCREEN ========== */
.gp-ds .modal-fullscreen .modal-content {
  height: 100%;
  border-radius: 0;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 576px) {
  .gp-ds .modal-dialog {
    margin: 0.5rem;
  }
  
  .gp-ds .modal-content {
    border-radius: 12px;
  }
  
  .gp-ds .modal-header {
    padding: 16px 18px;
  }
  
  .gp-ds .modal-title {
    font-size: 14px;
  }
  
  .gp-ds .modal-body {
    padding: 18px;
    font-size: 13px;
  }
  
  .gp-ds .modal-footer {
    padding: 14px 18px;
  }
}

/* ========== MODAL ANIMATIONS (Bootstrap compatibility) ========== */
.gp-ds .modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

.gp-ds .modal.show .modal-dialog {
  transform: none;
}