/* Global modal styling for a more modern look */

.modal-content {
  border-radius: 18px;                /* Softer corners */
  border: none;
  /* Blue-ish gradient (different angle to progress overlay) */
  background: linear-gradient(120deg, #ffffff 0%, #e6f0ff 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  /* Ensure entire modal never exceeds viewport height on mobile; body will scroll */
  max-height: 90vh;
  overflow: hidden; /* keep header/footer fixed, body scrolls */
}

/* Remove hard header/footer borders for a cleaner look */
.modal-header,
.modal-footer {
  border: none;
  background-color: transparent;
}

/* Hide standalone "Close" buttons that we added previously (ids end with -close) */
.modal-footer .btn[id$="-close"] {
  display: none !important;
}

/* Subtle info text let users know Esc works */
.modal-footer::before {
  content: "Press Esc to close";
  font-size: 0.75rem;
  color: #6c757d;
  margin-left: auto;
}

/* Ensure footer without buttons is small */
.modal-footer {
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
}

/* Vertically center via flex (in case a theme overrides) */
.modal.show .modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 1rem);
}

/*
 * Make the mobile-only modal readable on phones even when the whole app is
 * displayed as a scaled-down desktop layout (viewport width fixed at 1600).
 *
 * Strategy:
 * - Use viewport units (vw/vh) so the modal sizes relative to the device's
 *   visual viewport after browser scaling. This keeps the modal large without
 *   changing the app's global zoom.
 * - Scope to mobile via the JS-set body attribute to avoid impacting desktop.
 */
.mobile-only-modal .modal-dialog,
#mobile-only-modal .modal-dialog {
  /* Counter-scale so the modal appears device-sized even when wrapper is scaled. */
  --modal-inverse: calc(1 / var(--force-scale, 1));
  transform: scale(var(--modal-inverse));
  transform-origin: top center;
  width: calc(92vw / var(--modal-inverse));
  max-width: calc(92vw / var(--modal-inverse)) !important;
  min-height: calc(100vh / var(--modal-inverse));
  margin: 0 auto;
}

.mobile-only-modal .modal-content,
#mobile-only-modal .modal-content {
  /* Adjust so that after transform(scale(var(--modal-inverse))) the visual max-height is ~90vh */
  max-height: calc(90vh / var(--modal-inverse));
}

/* Allow the inner container to stretch and use viewport width */
.mobile-only-modal .mobile-only-modal-inner,
#mobile-only-modal .mobile-only-modal-inner {
  width: 100%;
  max-width: none;
}

.mobile-only-modal .modal-title,
#mobile-only-modal .modal-title {
  /* Base size; overall modal is counter-scaled via transform */
  font-size: clamp(16px, 3.5vw, 22px);
}

.mobile-only-modal .modal-body,
#mobile-only-modal .modal-body {
  /* Larger, legible text; overall size is further adjusted by transform */
  font-size: clamp(14px, 3.5vw, 18px);
  line-height: 1.5;
  padding: 2.2vh 3.2vw;
}

.mobile-only-modal .btn,
#mobile-only-modal .btn {
  font-size: clamp(14px, 4.2vw, 18px);
  padding: 1.2vh 3vw;
  border-radius: 10px;
}

/* Stronger backdrop to make the modal pop over the scaled UI */
.modal-backdrop.show {
  opacity: 0.65;
  backdrop-filter: blur(2px);
}

/* When any Bootstrap modal is open, prevent background (wrapper) from scrolling */
.modal-open .force-desktop-viewport {
  overflow: hidden !important;
}

/* Override Bootstrap modal-lg max-width caps to ensure 90vw is honored */
.mobile-only-modal.modal .modal-dialog,
.mobile-only-modal .modal-dialog.modal-lg,
#mobile-only-modal.modal .modal-dialog,
#mobile-only-modal .modal-dialog.modal-lg {
  max-width: 90vw !important;
}

/* Ensure the inner container can expand fully */
.mobile-only-modal .mobile-only-modal-inner,
#mobile-only-modal .mobile-only-modal-inner {
  width: 100%;
  max-width: none;
}

/* Make the inner modal body scroll if content is tall */
.modal-body {
  overflow-y: auto;
  max-height: calc(90vh - 120px); /* account for header + footer */
}