/* apply-modal-overrides.css
   Hard overrides to guarantee layout + scrolling stays correct
   Keep this file ONLY for layout/structure.
*/

/* Modal sizing */
#applyModal .modal-dialog {
  max-width: 980px !important;
  margin: 4vh auto !important;
}

/* Content becomes fixed-height flex column so body can scroll */
#applyModal .modal-content {
  display: flex !important;
  flex-direction: column !important;
  height: 92vh !important;
  overflow: hidden !important;
}

/* IMPORTANT: header/body/footer live inside the FORM */
#applyModal #applyForm {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Header + footer pinned */
#applyModal .modal-header,
#applyModal .modal-footer {
  flex: 0 0 auto !important;
}

/* Body scroll area */
#applyModal .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;            /* REQUIRED for scrolling in flex */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 22px 28px 18px !important;
}

/* If body is inside the form (it is), enforce scroll there too */
#applyModal #applyForm .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}


/* Footer layout: Cancel left, Submit right */
#applyModal .modal-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid var(--am-border) !important;
  background: var(--am-bg) !important;
}

/* Header background slightly different */
#applyModal .modal-header {
  background: #0b1328 !important;
  border-bottom: 1px solid var(--am-border) !important;
}

/* Center title */
#applyModal .modal-title {
  width: 100%;
  text-align: center;
  margin: 0;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
}

/* Forced overlay fallback */
.apply-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.60);
  z-index: 1050;
}

/* If bootstrap CSS isn’t present, .btn-close can render like a tiny checkbox/square.
   We already have Cancel + backdrop click + ESC, so hide it. */
#applyModal .modal-header .btn-close{
  display: none !important;
}

/* ===== Apply Modal — Audio cards should look like "real files" ===== */

#applyAudio .am-audio-card {
  border-radius: 12px;
  padding: 12px !important;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
}

#applyAudio .am-audio-card strong {
  font-size: 0.98rem;
  letter-spacing: 0.2px;
}

/* Make the native player feel like a full-width file control */
#applyAudio .am-audio-player {
  width: 100%;
  height: 42px;              /* gives it “file row” weight */
  display: block;
  margin-top: 6px;
}

/* Give the checkbox a “picker” vibe (less tiny) */
#applyAudio input[type="checkbox"] {
  transform: scale(1.15);
  transform-origin: center;
}

/* Better alignment for title + checkbox row */
#applyAudio .am-audio-card .d-flex {
  gap: 10px;
}