/* Fit the setup editor's contents to the dialog instead of widening its scroll area. */
#formation-dialog {
  box-sizing: border-box;
  width: min(980px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
}

#formation-dialog *,
#formation-dialog *::before,
#formation-dialog *::after {
  box-sizing: border-box;
}

#formation-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: calc(100vh - 34px);
  max-height: calc(100dvh - 34px);
  margin: 0;
}

#formation-dialog .dialog-heading,
#formation-dialog .dialog-footer {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

#formation-dialog .dialog-heading {
  position: relative;
  padding: 12px 20px;
}

/* Negative corner offsets otherwise extend the modal's horizontal scroll area. */
#formation-dialog .dialog-heading::before { top: 0; left: 0; }
#formation-dialog .dialog-heading::after { top: 0; right: 0; }
#formation-dialog .dialog-heading h2 {
  min-width: 0;
  margin: 0;
  font-size: 21px;
  overflow-wrap: anywhere;
}

#formation-dialog .dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 16px 20px 18px;
  overflow: auto;
  overscroll-behavior: contain;
}

#formation-dialog .dialog-body > * {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
}
#formation-dialog .dialog-description,
#formation-dialog .dialog-body > label,
#formation-dialog .formation-rules,
#formation-dialog .formation-capacities,
#formation-dialog .formation-files,
#formation-dialog #formation-copy-field,
#formation-dialog #formation-error { margin: 0; }
#formation-dialog .dialog-description { line-height: 1.6; }
#formation-dialog .formation-rules { gap: 10px 16px; }

#formation-commanders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  align-items: start;
}
#formation-commanders .commander-card {
  min-width: 0;
  max-width: 100%;
  padding: 13px;
}
#formation-dialog .commander-heading { margin-bottom: 10px; }
#formation-dialog .commander-heading h3,
#formation-dialog .commander-roster-meta,
#formation-dialog .commander-legacy-name,
#formation-dialog .help-copy,
#formation-dialog summary { min-width: 0; overflow-wrap: anywhere; }
#formation-dialog .commander-card > label { margin-bottom: 6px; font-size: 11px; }
#formation-dialog .commander-roster-meta { line-height: 1.5; }
#formation-dialog .commander-values { min-width: 0; margin-top: 8px; }
#formation-dialog .commander-values > summary { min-height: 30px; font-size: 11px; }
#formation-dialog .commander-stats { min-width: 0; gap: 7px; }

#formation-dialog input:not([type="checkbox"]),
#formation-dialog select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
#formation-dialog .formation-capacities { padding-top: 13px; }
#formation-dialog .formation-capacities > .help-copy { margin-bottom: 11px; }
#formation-dialog .formation-totals { min-width: 0; gap: 12px; }
#formation-dialog .formation-files { padding-top: 10px; }
#formation-dialog .formation-file-actions,
#formation-dialog .formation-history { min-width: 0; max-width: 100%; }
#formation-dialog .formation-history > select { flex: 1 1 230px; min-width: 0; }

#formation-dialog .dialog-footer {
  gap: 9px;
  padding: 12px 20px;
  background: #211c24;
}
#formation-dialog .dialog-footer > button {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  white-space: normal;
}
#formation-dialog .dialog-footer .button-primary { min-width: 125px; }

@media (min-width: 900px) {
  #formation-dialog .dialog-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 14px 20px; }
  #formation-dialog .dialog-body > .formation-name-field { grid-column: 1; align-self: end; }
  #formation-dialog .dialog-body > .formation-rules { grid-column: 2; align-self: end; gap: 12px; }
  #formation-dialog .formation-rules > label:first-child { flex: 1 1 145px; }
  #formation-dialog .formation-rules label:has(input[type="checkbox"]) { flex: 1 1 120px; }
}

@media (max-width: 560px) {
  #formation-dialog {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }
  #formation-form { max-height: calc(100vh - 22px); max-height: calc(100dvh - 22px); }
  #formation-dialog .dialog-heading { padding: 10px 14px; }
  #formation-dialog .dialog-heading h2 { font-size: 18px; }
  #formation-dialog .dialog-body { gap: 13px; padding: 14px; }
  #formation-commanders { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #formation-dialog .formation-rules > label:first-child { flex-basis: 140px; }
  #formation-dialog .formation-rules label:has(input[type="checkbox"]) { flex-basis: 115px; }
  #formation-dialog .formation-totals { gap: 9px; }
  #formation-dialog .formation-budget { font-size: 11px; }
  #formation-dialog .formation-budget input { font-size: 14px; }
  #formation-dialog .dialog-footer { gap: 8px; padding: 11px 14px; }
  #formation-dialog .dialog-footer > button { flex: 1 1 auto; padding-inline: 10px; font-size: 12px; }
  #formation-dialog .dialog-footer .button-primary { min-width: 110px; }
}